Détection du 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.

Mise en œuvre de JavaScript :

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

Extrait de code :

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 du 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 pour surveiller l'activité des utilisateurs. 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 adapter la détection des temps d'inactivité aux besoins spécifiques de votre application.