倒数计时器在任何用户活动(例如 onkeyup、鼠标移动等）上重置

Countdown timer reset on any user Activity (such as onkeyup, mouse move, etc..)

本文关键字：移动 鼠标 onkeyup 任何 计时器 用户 活动 例如 倒数      更新时间：2023-09-26

此代码在性质上类似于：

仅在选项卡处于活动状态时运行设置超时

但是，我在这里要完成的是，在文档上的任何用户活动上重置此 10 秒计时器。对于我的测试，我目前正在使用 keyup，但我还需要通过将鼠标移动到文档中的任何元素上等来做到这一点。

这是代码，

请参阅注释代码以了解我将要进行的潜在更改，我将它们注释为，因为我发现它们不起作用：

$(function(){
//var keyed = false;
function myFunction() {
    window.location.href="/backoffice/logout.jsp?forceClose=true";
}
(function() {
    //Just under 15 min in milliseconds
    //var time = 895000,
    var time = 10000,
        delta = 100,
        tid;
    tid = setInterval(function() {
        if ( window.blurred ) { return; }    
        time -= delta;
        //if ( keyed ) { 
        //  time = 10000; 
        //} 
        //keyed = false;
        if ( time <= 0 ) {
            clearInterval(tid);
            myFunction(); // time passed - do your work
        }        
    }, delta);
})();
//window.onkeyup = function() { keyed = true; };
window.onblur = function() { window.blurred = true; };
window.onfocus = function() { window.blurred = false; };
});

当然，我不明白如何在实践中使其工作，但希望我的思维过程是清晰的，我正在尝试使活动选项卡也侦听按键或鼠标单击（甚至可能是鼠标移动），如果是这种情况，请重置计时器。

有人对此有任何建议吗？

您可以在任何操作上重新启动计时器，如下所示：

var tid = null;
function startTimeout() {
  tid = setTimeout( // your code);
}
window.onkeyup = function() {
   tid && clearTimeout(tid);
   tid = startTimeout();
}

当使用 setTimeout 而不是 setInterval 时，您必须记住在完成后再次重新启动计时器：

function startTimeout() {
  tid = setTimeout(function(){ 
    // some code
    // start timer again!
    startTimeout();
  }, 10000);
}

function myFunction() {
    //window.location.href="/backoffice/logout.jsp?forceClose=true";
    alert('hello world');
}
function listener() {
     window.time = 10000,
     delta = 100,
    window.tid = setInterval(function() {   
        window.time -= delta;
        console.log(window.time);
        if ( time <= 0 ) {
            clearInterval(window.tid);
            myFunction(); // time passed - do your work
        }        
    }, delta);
};
    listener();
     $(document).on('keyup keypress blur change mousemove',function(){
        clearInterval(window.tid);
        listener();
    });
});
相关文章：