Question

我有一个脚本应该检查浏览器窗口（鼠标和键盘）上的用户活动，如果5分钟后没有活动执行注销功能。

简单的功能代码如下：

var tempLOT = 300000;

console.log('Auto Logout: ' + tempLOT + ' ms');

var st = new Date().toLocaleTimeString();
console.log('Auto Refresh started: ' + st);

document.onload = function() {
    inactivityTime();
};
document.onmousedown = function() {
    inactivityTime();
};
document.onkeypress = function() {
    inactivityTime();
};
document.ontouchstart = function() {
    inactivityTime();
};

var inactivityTime = function () {

    var t;
    window.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;


    function LOT() {
        console.log("Time to log out");
    }

    function resetTimer() { 

        clearTimeout(t);
        t = setTimeout(LOT, tempLOT);

        var dateObj = Date.now();

        dateObj = dateObj + tempLOT;
        estLOT = new Date(dateObj);

        var ot = new Date().toLocaleTimeString();   
        console.log("Ongoing User Activity: " + ot);
        console.log("Activity Counter: " + t);
        console.log("Estimated LOT: " + estLOT);

    }
};

当tempLOT低于5分钟时，代码正常工作。其他任何事情都过早地被执行了。从控制台输出：

Auto Logout: 300000 ms
(index):1 Auto Refresh started: 10:58:08 AM
(index):1 Ongoing User Activity: 10:58:21 AM
(index):1 Activity Counter: 223
(index):1 Estimated LOT: Fri Sep 30 2016 11:03:21 GMT-0400 (Eastern Daylight Time)
(index):1 Ongoing User Activity: 10:58:22 AM
(index):1 Activity Counter: 226
(index):1 Estimated LOT: Fri Sep 30 2016 11:06:57 GMT-0400 (Eastern Daylight Time)
[...] ----------- more user activity here ------
---------------- User left browser window ------------------------
---------- Then user come back to a browser window ---------------
(index):1 Ongoing User Activity: 11:04:01 AM
(index):1 Activity Counter: 8054
(index):1 Estimated LOT: Fri Sep 30 2016 11:09:01 GMT-0400 (Eastern Daylight Time)
(index):1 Ongoing User Activity: 11:04:01 AM
(index):1 Activity Counter: 8056
[...] ------- more user activity here ------
(index):1 Ongoing User Activity: 11:04:07 AM
(index):1 Activity Counter: 8703
(index):1 Estimated LOT: Fri Sep 30 2016 11:09:07 GMT-0400 (Eastern Daylight Time)
(index):1 Ongoing User Activity: 11:04:07 AM
(index):1 Activity Counter: 8705
(index):1 Estimated LOT: Fri Sep 30 2016 11:09:07 GMT-0400 (Eastern Daylight Time)
(index):1 Ongoing User Activity: 11:04:07 AM
(index):1 Activity Counter: 8707
(index):1 Estimated LOT: Fri Sep 30 2016 11:09:07 GMT-0400 (Eastern Daylight Time)
(index):1 Auto Refresh stopped: 11:04:21 AM
(index):1 Time to log out

根据用户活动，注销应在格林威治标准时间11:09:07进行，但是在11:04:21执行。

有什么想法发生了什么？

Answer 1

您在t内定义inactivityTime，因此每次调用它时都会声明一个新的t，以便其他计时器仍然存在。另外你为什么要在其中重新绑定所有这些事件？

你的代码真的应该是

＆＃13;

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

＆＃13;

<p>TEST</p>

＆＃13;

过早的setTimeout执行

1 个答案: