如何实现鼠标10秒未移动时触发事件？

你的思路完全正确——核心就是在鼠标移动时重置计时器，搭配setTimeout来实现10秒的延迟触发逻辑。下面是具体的代码实现和关键说明：

核心逻辑拆解 #

• 用变量存储计时器ID，方便后续清除旧的计时器
• 定义鼠标 idle 时要执行的目标函数
• 每次鼠标移动时，先清除当前计时器，再重新设置10秒后触发目标函数
• 页面初始化时启动一次计时器，覆盖用户加载页面后完全不动鼠标的场景

完整代码示例 #

// 存储计时器ID，用于后续清除操作
let idleTimer;

// 鼠标10秒未移动时执行的逻辑
function handleIdleState() {
    console.log('鼠标已10秒未移动！');
    // 替换成你实际需要执行的操作：比如显示提示弹窗、暂停视频、隐藏元素等
}

// 重置计时器的函数
function resetIdleTimer() {
    // 清除之前的计时器，避免多个计时器同时存在导致重复触发
    clearTimeout(idleTimer);
    // 重新设置10秒后触发idle逻辑
    idleTimer = setTimeout(handleIdleState, 10000); // 10000毫秒 = 10秒
}

// 页面加载完成后初始化逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 启动初始计时器
    resetIdleTimer();
    // 绑定鼠标移动事件，每次移动都重置计时器
    document.addEventListener('mousemove', resetIdleTimer);
});

关键细节说明 #

• 必须调用clearTimeout(idleTimer)：如果不清除旧计时器，每次鼠标移动都会生成新的计时器，最终会导致多个handleIdleState被触发，逻辑混乱。
• 扩展场景：如果需要检测“用户无任何操作（包括键盘）”，可以给document再绑定keydown事件，同样调用resetIdleTimer即可。

内容的提问来源于stack exchange，提问作者SuperSako22