52 lines
1006 B
JavaScript
52 lines
1006 B
JavaScript
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 检测用户是否处于空闲状态
|
||
|
|
*/
|
||
|
|
function useIdle(options = {}) {
|
||
|
|
const {
|
||
|
|
timeout = 10000,
|
||
|
|
events = [
|
||
|
|
"mousedown",
|
||
|
|
"mousemove",
|
||
|
|
"keypress",
|
||
|
|
"scroll",
|
||
|
|
"touchstart",
|
||
|
|
"wheel",
|
||
|
|
],
|
||
|
|
} = options;
|
||
|
|
|
||
|
|
const [isIdle, setIsIdle] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let idleTimer;
|
||
|
|
|
||
|
|
// 重置空闲计时器
|
||
|
|
const resetTimer = () => {
|
||
|
|
setIsIdle(false);
|
||
|
|
clearTimeout(idleTimer);
|
||
|
|
idleTimer = setTimeout(() => setIsIdle(true), timeout);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 初始化计时器
|
||
|
|
resetTimer();
|
||
|
|
|
||
|
|
// 添加事件监听器
|
||
|
|
events.forEach((event) => {
|
||
|
|
window.addEventListener(event, resetTimer, { passive: true });
|
||
|
|
});
|
||
|
|
|
||
|
|
// 清理函数
|
||
|
|
return () => {
|
||
|
|
clearTimeout(idleTimer);
|
||
|
|
events.forEach((event) => {
|
||
|
|
window.removeEventListener(event, resetTimer);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}, [timeout, events]);
|
||
|
|
|
||
|
|
return isIdle;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default useIdle;
|