Bei der Webentwicklung kann das Erkennen von Leerlaufzeiten für die Optimierung der Benutzererfahrung von entscheidender Bedeutung sein. Leerlaufzeit, definiert als Zeitraum der Benutzerinaktivität oder minimaler CPU-Auslastung, bietet die Möglichkeit, Inhalte vorab abzurufen oder zu laden, wodurch die Ladezeiten von Seiten verkürzt und die Reaktionsfähigkeit verbessert werden.
Um die Leerlaufzeiterkennung in Vanilla JavaScript zu aktivieren, verwenden Sie den folgenden Ansatz:
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 } };
Sobald die inactivityTime-Funktion definiert ist, initialisieren Sie sie an der gewünschten Stelle (z. B. onPageLoad):
window.onload = function() { inactivityTime(); }
Sie können die Ereignis-Listener weiter anpassen, indem Sie weitere DOM-Ereignisse hinzufügen, darunter:
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
Oder registrieren Sie Ereignisse dynamisch mithilfe eines Arrays:
window.addEventListener('load', resetTimer, true); var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; events.forEach(function(name) { document.addEventListener(name, resetTimer, true); });
Beachten Sie Folgendes window.onscroll wird nicht ausgelöst, wenn innerhalb eines scrollbaren Elements gescrollt wird. Um dies zu beheben, fügen Sie das dritte Argument in window.addEventListener('scroll', resetTimer, true) ein, um das Ereignis während der Erfassungsphase zu erfassen.
Das obige ist der detaillierte Inhalt vonWie kann ich Leerlaufzeiten in JavaScript erkennen, um den Vorabruf und das Vorladen von Inhalten zu optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!