CODEWITHSUNDEEP
javascript
JackTheKnife
JackTheKnife

Reputation: 4144

Premature setTimeout execution

I have a script which should to check user activity on a browser window (mouse and keyboard) and if there is no activity after 5 minutes execute logout function.

Simple functionality code looks like:

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

    }
};

Code works fine when I have tempLOT below 5 minutes. Anything else got executed prematurely. Below output from the console:

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

Based on user activity logout should occur at 11:09:07 GMT but were executed at 11:04:21.

Any clue what is going on?

Upvotes: 0

Views: 108

Answers (1)

epascarello
epascarello

Reputation: 207501

You define t inside of inactivityTime so every time you call it you declare a new t so the other timer will still exist. Also why are you rebinding all those events inside of it?

Your code really should just be

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

}());
<p>TEST</p>

Upvotes: 1

Related Questions