Javascript 客户端空闲时暂停设置超时刷新功能。当客户端处于活动状态时启用功能

一个现有的刷新功能，如果可能的话，我不想碰它。它刷新第页中的表

如果客户端处于空闲/非活动状态，我需要挂起刷新功能

如果客户端处于活动状态，则原始刷新功能将恢复到挂起之前的状态

//SUSPEND THIS FUNCTION IF CLIENT IS IDLE
//ENABLE THIS FUNCTION WHEN CLIENT IS ACTIVE
    function refreshTable() {

        window.clearTimeout(timer);

        timer = window.setTimeout(refreshTable, 5000);

        $("body").append("<p>refreshTable every 5 seconds.</p>");
    }
    var timer = window.setTimeout(refreshTable, 0);



    function idleClientCheck() {
        var t;
        window.onload = resetTimer;
        window.onmousemove = resetTimer;
        window.onmousedown = resetTimer;
        window.onclick = resetTimer;
        window.onscroll = resetTimer;
        window.onkeypress = resetTimer;


        function isNotIdle() {
            setTimeout(timer);
            //alert('isNotIdle');
        }

        function isIdle() {
            clearTimeout(timer);
            alert('isIdle');
        }

        function resetTimer() {
            clearTimeout(t);
            //MY LOGIC ERROR
            t = setInterval(isNotIdle, 9999);

            //THIS WORKS LIKE I WANT. BUT refreshTable() DOES NOT
            //RESTART AGAIN WHEN CLIENT IS ACTIVE
            t = setInterval(isIdle, 15000);
        } 
    }
    idleClientCheck();

---

当您意识到您所需要的只是两个计时器时，您的代码可以很容易地重构成更有意义的东西：

计时器1（比如refreshTimer）只是迭代地调用自身来刷新表 计时器2，比如idleTimer，检查用户空闲的时间。根据问题的要求，每当从窗口对象触发特定事件时，都会重置此计时器 基本定时器设置 考虑到这一点，我们可以设置两个全局计时器：

// Global timers
var refreshTimer = null,
    idleTimer = null;

我们还可以将超时存储在某个位置，这样它们就不会用神奇的常量扰乱我们的函数：refreshDuration是您要调用refresh函数的时间间隔，idleDuration是您用来确定用户是否处于非活动状态的时间间隔：

// Some settings
var refreshDuration = 5000,  // You can change this!
    idleDuration = 3000;     // You can change this!

p/s：您在问题中注意到，您希望等待15秒，即15000毫秒，但出于测试目的，我已将其缩短

刷新计时器：刷新内容的自调用函数 为了模拟freshTimer回调的window.setInterval函数，我们只需定义一个刷新函数，该函数本身启动一个新的超时并再次调用自身：

var refresh = function() {
  $("body").append("<p>refreshTable every 5 second.</p>");

  // Call itself
  refreshTimer = window.setTimeout(refresh, refreshDuration);
};

一次将所有这些结合起来，您将得到一个功能片段：

//全球计时器 var refreshttimer=null， idleTimer=null； //一些设置 var刷新持续时间=5000， 闲置教育=3000； //refresh只是一个具有自调用功能的方法，用于模拟window.setInterval 变量刷新=函数{ $body.append每5秒刷新一次表。

； //自称 refreshTimer=window.setTimeoutrefresh，refreshDuration； }; //idleClientCheck运行自己的计时器来检查空闲客户端 var idleClientCheck=函数{ //这些事件将触发新的倒计时 var事件=[“加载”、“鼠标移动”、“鼠标向下”、“单击”、“滚动”、“按键”]； 对于变量i=0；i这是我的工作，我已经查过了，你也可以在学校的编辑那里查到

<script>
 //SUSPEND THIS FUNCTION IF CLIENT IS IDLE
//ENABLE THIS FUNCTION WHEN CLIENT IS ACTIVE
    function refreshTable() {

        window.clearTimeout(timer);

        timer = window.setTimeout(refreshTable, 5000);

        $("body").append("<p>refreshTable every 5 seconds.</p>");
    }
    var timer = window.setTimeout(refreshTable, 0);



    function idleClientCheck() {
        var t1;
         var t2;
        window.onload = resetTimer;
        window.onmousemove = resetTimer;
        window.onmousedown = resetTimer;
        window.onclick = resetTimer;
        window.onscroll = resetTimer;
        window.onkeypress = resetTimer;


        function isNotIdle() {

            timer = window.setTimeout(refreshTable, 5000);
            //setTimeout(timer);
            //alert('isNotIdle');
             $("body").append("<p>isNotIdle</p>");
        }

        function isIdle() {
        clearTimeout(t1);
            //timer = null;
            window.clearTimeout(timer);
            timer = null;
             $("body").append("<p>isIdle</p>");
            //alert('isIdle');
        }

        function resetTimer() {
            clearTimeout(t1);
            clearTimeout(t2);
            t1 = setInterval(isNotIdle, 9999);
            t2 = setInterval(isIdle, 15000);
        } 
    }
    idleClientCheck();
</script>

---

您可以使用CaleStalk来停止运行的间隔，但是您认为什么是“活动”用户？如果客户端在15秒内移动鼠标、单击等，我认为它们是“活动的”或“不空闲的”。15秒将改为15-30分钟后在生产。只是添加了jquery链接在您的标题前测试它非常彻底的答案。虽然我想换一种方式，但是如果客户端处于非活动/空闲状态15秒或更长时间，刷新将停止，直到客户端移动鼠标、单击等。计时器的想法很好。

<script>
 //SUSPEND THIS FUNCTION IF CLIENT IS IDLE
//ENABLE THIS FUNCTION WHEN CLIENT IS ACTIVE
    function refreshTable() {

        window.clearTimeout(timer);

        timer = window.setTimeout(refreshTable, 5000);

        $("body").append("<p>refreshTable every 5 seconds.</p>");
    }
    var timer = window.setTimeout(refreshTable, 0);



    function idleClientCheck() {
        var t1;
         var t2;
        window.onload = resetTimer;
        window.onmousemove = resetTimer;
        window.onmousedown = resetTimer;
        window.onclick = resetTimer;
        window.onscroll = resetTimer;
        window.onkeypress = resetTimer;


        function isNotIdle() {

            timer = window.setTimeout(refreshTable, 5000);
            //setTimeout(timer);
            //alert('isNotIdle');
             $("body").append("<p>isNotIdle</p>");
        }

        function isIdle() {
        clearTimeout(t1);
            //timer = null;
            window.clearTimeout(timer);
            timer = null;
             $("body").append("<p>isIdle</p>");
            //alert('isIdle');
        }

        function resetTimer() {
            clearTimeout(t1);
            clearTimeout(t2);
            t1 = setInterval(isNotIdle, 9999);
            t2 = setInterval(isIdle, 15000);
        } 
    }
    idleClientCheck();
</script>