Comment puis-je détecter le temps d'inactivité des utilisateurs en JavaScript ?

Détection des temps d'inactivité en JavaScript

Introduction :

Dans le développement Web, comprendre l'activité des utilisateurs est crucial pour optimiser les performances et offrir une meilleure expérience utilisateur. La détection du temps d'inactivité, défini comme une période d'inactivité ou une faible utilisation du processeur, peut vous aider à déclencher des actions telles que le préchargement de contenu ou l'authentification de l'utilisateur.

Implémentation JavaScript :

Pour détecter temps d'inactivité en JavaScript, vous pouvez utiliser l'approche JavaScript vanille suivante :

Code Extrait :

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

Utilisation :

Pour initialiser la détection des temps d'inactivité, appelez la fonction inactivityTime() après le chargement de la page :

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

Personnalisation :

Vous pouvez ajouter plus d'événements DOM à surveiller activité de l'utilisateur. Certains des événements les plus couramment utilisés sont :

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

Pour une meilleure personnalisation, vous pouvez utiliser un tableau pour enregistrer plusieurs événements :

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

En personnalisant les événements que vous surveillez, vous pouvez adaptez la détection des temps d'inactivité aux besoins spécifiques de votre application.

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!