Question

我不想触摸的现有刷新功能（如果可能）。它会刷新页面中的表格。

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

如果客户端处于活动状态，则原始刷新功能将恢复为暂停之前的状态。

//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();

Codepen

Answer 1

当您意识到所有需求都是两个计时器时，您的代码可以轻松地重构为更有意义的内容：

计时器1，比如refreshTimer，只是迭代地调用自己刷新表
计时器2，比如idleTimer，检查用户空闲的时间。根据您的问题要求，只要从window对象触发特定事件，就会重置此计时器

基本计时器设置

考虑到这一点，我们可以设置两个全球计时器：

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

我们还可以在某处存储超时，这样它们就不会使用魔术常量来混乱我们的函数:) refreshDuration是你要调用刷新函数的间隔，而idleDuration是持续时间您用来确定用户是否处于非活动状态：

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

p / s：你在问题中注意到你想要等待15秒（即15000ms），但出于测试目的，我已经减少了它。

刷新计时器：刷新内容的自调用功能

为了模仿window.setInterval回调的freshTimer函数，我们只需定义一个refresh()函数，该函数本身会启动一个新的超时并再次调用自身：

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

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

空闲计时器：检查用户（在）活动

对于空闲计时器，您要做的是不使用window.onload来绑定事件。这是因为这只能运行一次，如果您的页面上有其他window.onload语句，您将面临覆盖它们的风险。请改用.addEventListener。因此，我们可以做的是将您要监听的所有事件存储在一个数组中，并使用IIFE迭代地绑定它们。

在每个事件回调中，您希望清除两个全局计时器，因为：

您想取消自调整刷新功能，
您想重新开始向“用户空闲”状态倒计时

然后你只需在同一个回调中重新启动idleTimer。 idleTimer只会在超时后重启自动调用刷新功能：

var idleClientCheck = function() {

  // These events will trigger a new countdown
  var events = ['load', 'mousemove', 'mousedown', 'click', 'scroll', 'keypress'];
  for (var i = 0; i < events.length; i++) {

    // Use IIFE to bind correct event on the fly
    (function() {
      var e = events[i];
      window.addEventListener(e, function() {
        // When these events are triggered, we cancel refreshTimer and idleTimer
        window.clearTimeout(refreshTimer);
        window.clearTimeout(idleTimer);

        console.log('Refresh timer cancelled by ' + e + ', will restart in ' + idleDuration + 'ms');

        // We restart idleTimer
        // idleTimer simply fires refresh() when time runs out
        idleTimer = window.setTimeout(refresh, idleDuration);
      });
    })(i);

  }
};

idleClientCheck();

立即合并所有这些，您将获得一个功能代码段：

// Global timers
var refreshTimer = null,
    idleTimer = null;
    
// Some settings
var refreshDuration = 5000,
    idleDuration = 3000;

// refresh() is simply a method with a self-invoking to mimic window.setInterval
var refresh = function() {
  $("body").append("<p>refreshTable every 5 second.</p>");
  
  // Call itself
  refreshTimer = window.setTimeout(refresh, refreshDuration);
};

// idleClientCheck() runs its own timer to check for idle client
var idleClientCheck = function() {

  // These events will trigger a new countdown
  var events = ['load', 'mousemove', 'mousedown', 'click', 'scroll', 'keypress'];
  for (var i = 0; i < events.length; i++) {
  
    // Use IIFE to bind correct event on the fly
    (function() {
      var e = events[i];
      window.addEventListener(e, function() {
        // When these events are triggered, we cancel refreshTimer and idleTimer
        window.clearTimeout(refreshTimer);
        window.clearTimeout(idleTimer);

        console.log('Refresh timer cancelled by ' + e + ', will restart in ' + idleDuration + 'ms');

        // We restart idleTimer
        // idleTimer simply fires refresh() when time runs out
        idleTimer = window.setTimeout(refresh, idleDuration);
      });
    })(i);
    
  }
};

idleClientCheck();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

它的工作对我来说..我已经检查过，你也可以在＆＃34; TryitEditor＆＃34; W3Schools

<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>

客户端空闲时挂起setTimeout刷新功能。客户端处于活动状态时启用功能

2 个答案:

基本计时器设置

刷新计时器：刷新内容的自调用功能

空闲计时器：检查用户（在）活动