Wie kann ich die Leerlaufzeit eines Benutzers in JavaScript erkennen?

Leerlaufzeit in JavaScript erkennen

Einführung:

In der Webentwicklung das Verständnis 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 Überwachen Sie die Benutzeraktivität. 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);
});

Indem Sie die von Ihnen überwachten Ereignisse anpassen, können Sie dies tun Passen Sie die Leerlaufzeiterkennung an die Anforderungen Ihrer spezifischen Anwendung an.

Das obige ist der detaillierte Inhalt vonWie kann ich die Leerlaufzeit eines Benutzers in JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!