JS绑定mousemove重置setTimeout实现闲置跳转是否会残留过多定时器？

结论 #

你的担忧不符合实际，现有逻辑不会产生定时器累积的性能问题，也不会引发相关异常。

原因说明 #

• 浏览器提供的clearTimeout机制是完全可靠的，只要传入有效的定时器ID，对应的定时器会被立即从浏览器的定时任务队列中完全移除，不会有任何残留。你的逻辑中全局只有一个NavigateTimer变量存储当前活跃的定时器ID，每次重置时都会先清理旧定时器再生成新的，同一时间最多只会存在1个活跃定时器，完全不存在累积的可能。
• 即使mousemove事件高频触发，clearTimeout和setTimeout本身的执行开销极低，即使每秒触发上百次也不会对页面性能造成可感知的影响。

可选优化建议 #

如果想进一步减少不必要的API调用，你可以给重置逻辑增加防抖限制，同时可以补充更多交互事件的监听，避免用户仅使用键盘、滚动页面时被误判定为闲置，参考修改代码如下：

var NavigateTimer;
var lastResetTime = 0;
// 防抖间隔，可按需调整，此处设置为100ms
var debounceGap = 100;

document.addEventListener("mousemove", resetTimer);
// 补充其他交互事件监听，降低误判概率
document.addEventListener("keydown", resetTimer);
document.addEventListener("scroll", resetTimer);
document.addEventListener("click", resetTimer);

function setTimer ()
{
    // 实际使用时将5000替换为3600000，即可实现1小时闲置跳转
    NavigateTimer = setTimeout(setNav, 5000);
}

function resetTimer ()
{
    var now = Date.now();
    // 两次重置间隔小于阈值则跳过执行
    if(now - lastResetTime < debounceGap) return;
    lastResetTime = now;
    clearTimeout(NavigateTimer);
    setTimer();
}

function setNav ()
{
    console.log("Navigate")
}

setTimer();

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