Vorzeitige setTimeout Ausführung

Question

Ich habe ein Skript, das Benutzeraktivität in einem Browserfenster (Maus und Tastatur) überprüfen sollte und wenn es keine Aktivität nach 5 Minuten gibt, führen Sie Logout-Funktion aus.

Einfache Funktionalität Code wie folgt aussieht:

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 funktioniert gut, wenn ich tempLOT unter 5 Minuten Zeit haben. Alles andere wurde vorzeitig ausgeführt. Unterhalb Ausgabe von der Konsole:

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 

Basierend auf Benutzeraktivität Abmelde sollte 11.09.07 GMT auftreten, sondern wurden bei 11.04.21 ausgeführt.

Irgendwelche Ahnung, was ist los?

Answer 1

Sie definieren t innerhalb von inactivityTime, also jedes Mal, wenn Sie es anrufen, erklären Sie eine neue t, so dass der andere Timer noch existiert. Warum verbindest du auch all diese Ereignisse darin?

Ihr Code sollte wirklich nur sein

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