Question

我可以每隔30秒执行以下操作来重新加载页面，后端逻辑将确定哪个会话已失效：

setInterval(function () {
    location.reload()
}, 30000);

但是，如果用户未处于活动状态，我将如何仅运行此30秒location.reload()？例如，如果用户未在页面上处于活动状态（仅在用户“处于非活动状态”后才开始计数），银行将如何具有用户超时。怎么会这样做？

Answer 1

一种方法是跟踪鼠标移动。如果用户将焦点从页面上移开，或者没有兴趣，通常就没有鼠标活动：

(function() {
  var lastMove = Date.now();

  document.onmousemove = function() {
    lastMove = Date.now();
  }

  setInterval(function() {
    var diff = Date.now() - lastMove;
    if (diff > 1000) {
      console.log('Inactive for ' + diff + ' ms');
    }
  }, 1000);
}());

Answer 2

首先定义什么＆＃34;活跃＆＃34;手段。＆＃34;主动＆＃34;可能意味着，发送鼠标点击和击键。

然后，为这些情况设计自己的处理程序，如下所示：

// Reseting the reload timer
MyActivityWatchdog.prototype.resetReloadTimer = function(event) {
  var reloadTimeInterval = 30000;
  var timerId = null;

  ...

  if (timerId) {
     window.clearInterval(timerId);
  }
  timerId = window.setInterval( reload... , reloadTimeInterval);

  ...

};

然后，确保必要的事件处理程序将调用resetReloadTimer()。为此，您必须查看您的软件已经执行的操作。是否有按键处理器？有鼠标移动处理程序吗？在不知道您的代码的情况下，在文档或窗口上注册按键或鼠标移动可能是一个好的开始：

window.onmousemove = function() {
  ...
  activityWatchdog.resetReloadTimer();
  ...
};

但是像这样，准备像按钮等的子元素不会激活事件，并且已经有不同的事件处理程序。妥协将是通过注册处理程序找到一组良好的元素，以确保＆＃34;活跃＆＃34;将被承认。例如。如果您的应用程序中有一个很大的富文本编辑器，那么仅在那里注册就足够了。所以，也许您可以将resetReloadTimer()的调用添加到那里的代码中。

Answer 3

要解决此问题，请使用窗口模糊和焦点，如果此人不在那里30秒，它将进入其他条件，否则将重新加载页面。

setTimeout(function(){
    $(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                $('div').text("user is not active on page ");
                break;
            case "focus":
                location.reload()
                break;
        }
    }

    $(this).data("prevType", e.type);
    })},30000);

DEMO：http://jsfiddle.net/rpawdg6w/2/

Answer 4

您可以在后台检查用户会话，例如每隔30-60秒发送一次AJAX呼叫。如果AJAX的响应不充分（例如会话已过期），那么您可以重新加载页面。

＆＃13;

var timer;
  function checkSession() {
    $.ajax({
      url : 'checksession.php',
      success: function(response) {
        if (response == false) {
          location.reload();
        }
      }
    });
  
    clearTimeout(timer);
    timer = setTimeout(checkSession,30 * 1000);
}

checkSession();

＆＃13;

如果用户未激活，则为setTimeout函数

4 个答案: