diff --git a/hooks/useIdle/index.d.ts b/hooks/useIdle/index.d.ts index 1ca791c..4b57060 100644 --- a/hooks/useIdle/index.d.ts +++ b/hooks/useIdle/index.d.ts @@ -1,7 +1,7 @@ export interface UseIdleOptions { /** 空闲超时时间(毫秒),默认值 10000 */ timeout?: number; - /** 监听的事件列表,默认值 ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'wheel'] */ + /** 监听的事件列表,默认值 ["mousemove", "mousedown", "resize", "keydown", "touchstart", "wheel"] */ events?: string[]; } diff --git a/hooks/useIdle/index.js b/hooks/useIdle/index.js index d583540..7cdfd41 100644 --- a/hooks/useIdle/index.js +++ b/hooks/useIdle/index.js @@ -6,14 +6,7 @@ import { useEffect, useState } from "react"; function useIdle(options = {}) { const { timeout = 10000, - events = [ - "mousedown", - "mousemove", - "keypress", - "scroll", - "touchstart", - "wheel", - ], + events = ["mousemove", "mousedown", "resize", "keydown", "touchstart", "wheel"], } = options; const [isIdle, setIsIdle] = useState(false); @@ -21,29 +14,52 @@ function useIdle(options = {}) { useEffect(() => { let idleTimer; - // 重置空闲计时器 - const resetTimer = () => { - setIsIdle(false); - clearTimeout(idleTimer); - idleTimer = setTimeout(() => setIsIdle(true), timeout); + // 设置空闲状态 + const setIdle = () => { + setIsIdle(true); }; - // 初始化计时器 - resetTimer(); + // 重置为空闲前的状态 + const setActive = () => { + setIsIdle(false); + }; + + // 重置计时器 + const resetTimer = () => { + clearTimeout(idleTimer); + idleTimer = setTimeout(setIdle, timeout); + }; + + // 初始化计时器(仅在非空闲状态下) + if (!isIdle) { + resetTimer(); + } + + // 事件处理函数 + const handleUserActivity = () => { + // 如果当前是空闲状态,用户操作后重置为活跃状态 + if (isIdle) { + setActive(); + } + else { + // 如果当前是活跃状态,重置计时器 + resetTimer(); + } + }; // 添加事件监听器 events.forEach((event) => { - window.addEventListener(event, resetTimer, { passive: true }); + window.addEventListener(event, handleUserActivity, { passive: true }); }); // 清理函数 return () => { clearTimeout(idleTimer); events.forEach((event) => { - window.removeEventListener(event, resetTimer); + window.removeEventListener(event, handleUserActivity); }); }; - }, [timeout, events]); + }, [timeout, events, isIdle]); return isIdle; }