Leerlaufzeit in JavaScript erkennen

Einführung:

In der Webentwicklung das Verstehen der Benutzeraktivität ist entscheidend für die Optimierung der Leistung und die Bereitstellung einer besseren Benutzererfahrung. Durch das Erkennen von Leerlaufzeiten, definiert als Zeitraum der Inaktivität oder geringer CPU-Auslastung, können Sie Aktionen wie das Vorabladen von Inhalten oder die Benutzerauthentifizierung auslösen.

JavaScript-Implementierung:

Zur Erkennung Leerlaufzeit in JavaScript können Sie den folgenden Vanilla-JavaScript-Ansatz verwenden:

Code Snippet:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

Verwendung:

Um die Leerlaufzeiterkennung zu initialisieren, rufen Sie die Funktion inactivityTime() auf, nachdem die Seite geladen wurde:

window.onload = function() {
  inactivityTime();
}

Anpassung:

Sie können weitere DOM-Ereignisse hinzufügen, um die Benutzeraktivität zu überwachen. Einige der am häufigsten verwendeten Ereignisse sind:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

Zur besseren Anpassung können Sie ein Array verwenden, um mehrere Ereignisse zu registrieren:

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});

Durch Anpassen der von Ihnen überwachten Ereignisse können Sie die Leerlaufzeiterkennung an die Anforderungen Ihrer spezifischen Anwendung anpassen.