重置并设置鼠标移动的超时，以便在不活动后做一些事情

Question

我有一段代码，在一个小时不活动后导航到另一个页面。

var NavigateTimer;
document.addEventListener("mousemove", resetTimer);
function setTimer ()
{
NavigateTimer = setTimeout(setNav, 5000);
}
function resetTimer ()
{
clearTimeout(NavigateTimer);
setTimer();
}
function setNav ()
{
console.log("Navigate")
}
setTimer();

5秒后setNav被调用。如果有一个鼠标移动事件，我想清除/重置超时，并开始一个新的。这是有效的，但我担心清除和设置超时与鼠标移动会创建太多的超时，因为我认为清除并不能完全删除它。

这是真的吗?这会产生问题吗?或者这是我不应该担心的事情?

Answer 1

您可以使用单个计时器来重复(但不太频繁)检查自最后一个活动以来所经过的时间。导航将删除这个计时器，所以根本不需要调用clearInterval。

let lastActivity = new Date();
const maxWait = 15 * 1000; // Inactivity interval before navigation, in msec
setInterval(() => {
if (new Date().valueOf() - lastActivity.valueOf() > maxWait) {
console.log("Navigate");
location.href = "https://www.google.com";
}
}, 5000);
document.addEventListener("mousemove", () => {
console.log("Mouse moved");
lastActivity = new Date();
});

Answer 2

我觉得这个更好。简洁明了

var mTimer;
const setNav_ = function(){
console.log("Navigate");
}
document.addEventListener("mousemove", function(){
clearTimeout(mTimer);
mTimer = setTimeout(setNav_, 5000);
});