优化useIdle

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[];
 }
 

hooks/useIdle/index.js

@@ -6,14 +6,7 @@ import { useEffect, useState } from "react";
 function useIdle(options = {}) {
   const {
     timeout = 10000,
-    events = [
+    events = ["mousemove", "mousedown", "resize", "keydown", "touchstart", "wheel"],
-      "mousedown",
-      "mousemove",
-      "keypress",
-      "scroll",
-      "touchstart",
-      "wheel",
-    ],
   } = options;
 
   const [isIdle, setIsIdle] = useState(false);
@@ -21,29 +14,52 @@ function useIdle(options = {}) {
   useEffect(() => {
     let idleTimer;
 
-    // 重置空闲计时器
+    // 设置空闲状态
-    const resetTimer = () => {
+    const setIdle = () => {
-      setIsIdle(false);
+      setIsIdle(true);
-      clearTimeout(idleTimer);
-      idleTimer = setTimeout(() => setIsIdle(true), timeout);
     };
 
-    // 初始化计时器
+    // 重置为空闲前的状态
-    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;
 }