Comment puis-je détecter les temps d'inactivité dans JavaScript pour optimiser la prélecture et le préchargement du contenu ?

Détection du temps d'inactivité en JavaScript : un guide pour la prélecture et le préchargement du contenu

Dans le développement Web, la détection du temps d'inactivité peut être cruciale pour optimiser l'expérience utilisateur. Le temps d'inactivité, défini comme une période d'inactivité de l'utilisateur ou d'utilisation minimale du processeur, offre la possibilité de pré-récupérer ou de précharger du contenu, réduisant ainsi les temps de chargement des pages et améliorant la réactivité.

Implémentation de la détection des temps d'inactivité dans Vanilla JavaScript

Pour activer la détection des temps d'inactivité dans Vanilla JavaScript, utilisez l'approche suivante :

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

Initialisation et Personnalisations

Une fois la fonction inactivityTime définie, initialisez-la là où vous le souhaitez (par exemple, onPageLoad) :

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

Vous pouvez personnaliser davantage les écouteurs d'événements en ajoutant d'autres événements DOM, notamment :

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

Ou enregistrez les événements de manière dynamique à l'aide d'un tableau :

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

Notez que window.onscroll ne se déclenchera pas si le défilement se produit dans un élément défilant. Pour résoudre ce problème, incluez le troisième argument dans window.addEventListener('scroll', resetTimer, true) pour capturer l'événement pendant la phase de capture.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!