68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* 检测用户是否处于空闲状态
|
|
*/
|
|
function useIdle(options = {}) {
|
|
const {
|
|
timeout = 10000,
|
|
events = ["mousemove", "mousedown", "resize", "keydown", "touchstart", "wheel"],
|
|
} = options;
|
|
|
|
const [isIdle, setIsIdle] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let idleTimer;
|
|
|
|
// 设置空闲状态
|
|
const setIdle = () => {
|
|
setIsIdle(true);
|
|
};
|
|
|
|
// 重置为空闲前的状态
|
|
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, handleUserActivity, { passive: true });
|
|
});
|
|
|
|
// 清理函数
|
|
return () => {
|
|
clearTimeout(idleTimer);
|
|
events.forEach((event) => {
|
|
window.removeEventListener(event, handleUserActivity);
|
|
});
|
|
};
|
|
}, [timeout, events, isIdle]);
|
|
|
|
return isIdle;
|
|
}
|
|
|
|
export default useIdle;
|