Comment détecter élégamment le temps d'inactivité en JavaScript?

Est-il possible de détecter le temps " inactif " en JavaScript?
Mon principal cas d'utilisation serait probablement de pré-récupérer ou de précharger du contenu.

Temps d'inactivité : période d'inactivité de l'utilisateur ou sans utilisation du processeur

Voici un script simple utilisant JQuery qui gère les événements mousemove et keypress. Si le délai expire, la page se recharge.

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        window.location.reload();
    }
}
</script>   

Sans utiliser jQuery, uniquement du vanilla JavaScript:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeypress = 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
    }
};

Et lancez la fonction là où vous en avez besoin (par exemple: onPageLoad).

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

Vous pouvez ajouter plus d'événements DOM si vous en avez besoin. Les plus utilisés sont:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true); // improved; see comments

Ou enregistrez les événements souhaités à 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); 
});

Liste des événements DOM : http://www.w3schools.com/jsref/dom_obj_event.asp

N'oubliez pas d'utiliser windowou documentselon vos besoins. Ici vous pouvez voir les différences entre eux: Quelle est la différence entre la fenêtre, l'écran et le document en Javascript?

Le code mis à jour avec @ frank-conijn et @daxchen s'améliore: window.onscrollne se déclenche pas si le défilement est à l'intérieur d'un élément déroulant, car les événements de défilement ne bouillonnent pas. window.addEventListener('scroll', resetTimer, true), le troisième argument indique à l'auditeur d'attraper l'événement pendant la phase de capture au lieu de la phase de bulle.

Amélioration de la réponse d'Equiman:

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;  // catches touchscreen presses as well      
    window.ontouchstart = resetTimer; // catches touchscreen swipes as well 
    window.onclick = resetTimer;      // catches touchpad clicks as well
    window.onkeypress = resetTimer;   
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function yourFunction() {
        // your function for too long inactivity goes here
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(yourFunction, 10000);  // time is in milliseconds
    }
}
idleLogout();

.
Mis à part les améliorations concernant la détection d'activité et le changement de documentà window, ce script appelle en fait la fonction, plutôt que de la laisser inactive.

Il n'attrape pas directement l'utilisation du CPU, mais cela est impossible, car l'exécution d'une fonction provoque l'utilisation du CPU. Et l'inactivité des utilisateurs finit par entraîner une utilisation nulle du processeur, donc indirectement, elle n'attrape aucune utilisation du processeur.

J'ai créé une petite bibliothèque qui fait ça il y a un an:

https://github.com/shawnmclean/Idle.js

La description:

Petite bibliothèque javascript pour signaler l'activité de l'utilisateur dans le navigateur (absent, inactif, ne regardant pas la page Web, dans un onglet différent, etc.). qui est indépendante de toute autre bibliothèque javascript telle que jquery.

Les utilisateurs de Visual Studio peuvent l'obtenir auprès de NuGet en: PM> Install-Package Idle.js

Voici une implémentation jQuery approximative de l'idée de tvanfosson:

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval(timerIncrement, 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})

Similaire à la solution Iconic ci-dessus (avec événement personnalisé jQuery) ...

// use jquery-idle-detect.js script below
$(window).on('idle:start', function(){
  //start your prefetch etc here...
});

$(window).on('idle:stop', function(){
  //stop your prefetch etc here...
});

//jquery-idle-detect.js
(function($,$w){
  // expose configuration option
  // idle is triggered when no events for 2 seconds
  $.idleTimeout = 2000;

  // currently in idle state
  var idle = false;

  // handle to idle timer for detection
  var idleTimer = null;

  //start idle timer and bind events on load (not dom-ready)
  $w.on('load', function(){
    startIdleTimer();
    $w.on('focus resize mousemove keyup', startIdleTimer)
      .on('blur',idleStart) //force idle when in a different tab/window
      ;
  ]);

  function startIdleTimer() {
    clearTimeout(idleTimer); //clear prior timer

    if (idle) $w.trigger('idle:stop'); //if idle, send stop event
    idle = false; //not idle

    var timeout = ~~$.idleTimeout; // option to integer
    if (timeout <= 100) timeout = 100; // min 100ms
    if (timeout > 300000) timeout = 300000; // max 5 minutes

    idleTimer = setTimeout(idleStart, timeout); //new timer
  }

  function idleStart() {
    if (!idle) $w.trigger('idle:start');
    idle = true;
  }

}(window.jQuery, window.jQuery(window)))

Vous pouvez le faire plus élégamment avec le soulignement et le jquery -

$('body').on("click mousemove keyup", _.debounce(function(){
    // do preload here
}, 1200000)) // 20 minutes debounce

Ma réponse a été inspirée par la réponse de vijay , mais c'est une solution plus courte et plus générale que je pensais partager pour quiconque pourrait l'aider.

(function () { 
    var minutes = true; // change to false if you'd rather use seconds
    var interval = minutes ? 60000 : 1000; 
    var IDLE_TIMEOUT = 3; // 3 minutes in this example
    var idleCounter = 0;

    document.onmousemove = document.onkeypress = function () {
        idleCounter = 0;
    };

    window.setInterval(function () {
        if (++idleCounter >= IDLE_TIMEOUT) {
            window.location.reload(); // or whatever you want to do
        }
    }, interval);
}());

Dans sa forme actuelle, ce code s'exécutera immédiatement et rechargera votre page actuelle après 3 minutes sans mouvement de la souris ni appui sur les touches.

Cela utilise du JavaScript vanilla simple et une expression de fonction immédiatement invoquée pour gérer les délais d'inactivité d'une manière propre et autonome.

Je sais que c'est une question relativement ancienne, mais j'ai eu le même problème et j'ai trouvé une assez bonne solution.

J'ai utilisé: jquery.idle et je n'avais qu'à faire:

$(document).idle({
  onIdle: function(){
    alert('You did nothing for 5 seconds');
  },
  idle: 5000
})

Voir démo JsFiddle .

(Juste pour info: voir ceci pour le suivi des événements de back-end Leadload navigateur )

Toutes les réponses précédentes ont un gestionnaire de déplacement de souris toujours actif. Si le gestionnaire est jQuery, le traitement supplémentaire effectué par jQuery peut s'additionner. Surtout si l'utilisateur utilise une souris de jeu, jusqu'à 500 événements par seconde peuvent se produire.

Cette solution évite de gérer chaque événement de déplacement de souris. Il en résulte une petite erreur de synchronisation, mais que vous pouvez ajuster à votre besoin.

function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keydown", onActivity);
    }

    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        //since the mouse is moving, we turn off our event hooks for 1 second
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keydown", onActivity);
        setTimeout(startTimer, 1000);
    }
}

http://jsfiddle.net/jndxq51o/

Vous pourriez probablement pirater quelque chose ensemble en détectant le mouvement de la souris sur le corps du formulaire et en mettant à jour une variable globale avec le dernier temps de mouvement. Vous devrez alors avoir un temporisateur d'intervalle qui vérifie périodiquement le dernier temps de mouvement et fait quelque chose s'il a été suffisamment long depuis que le dernier mouvement de souris a été détecté.

J'ai écrit une petite classe ES6 pour détecter l'activité et autrement déclencher des événements en cas de délai d'inactivité. Il couvre le clavier, la souris et le toucher , peut être activé et désactivé et dispose d'une API très allégée:

const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();

Il ne dépend pas de jQuery, mais vous devrez peut-être l'exécuter via Babel pour prendre en charge les navigateurs plus anciens.

https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096

Je pourrais le publier en tant que package npm une fois que j'aurai des commentaires.

Si vous ciblez un navigateur pris en charge (Chrome ou Firefox à partir de décembre 2018), vous pouvez tester le requestIdleCallback et inclure le shim requestIdleCallback pour les navigateurs non pris en charge.

Essayez ce code, il fonctionne parfaitement.

var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "SessionExpired.aspx";
    }
}

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $('body').mousemove(function (e) {
     //alert("mouse moved" + idleTime);
     idleTime = 0;
    });

    $('body').keypress(function (e) {
      //alert("keypressed"  + idleTime);
        idleTime = 0;
    });



    $('body').click(function() {
      //alert("mouse moved" + idleTime);
       idleTime = 0;
    });

});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 minutes

        window.location.assign("http://www.google.com");
    }
}
</script> 

Je pense que ce code jquery est parfait, bien que copié et modifié à partir des réponses ci-dessus !! donot a oublié d'inclure la bibliothèque jquery dans votre fichier!

Le problème avec toutes ces solutions, bien que correctes, elles ne sont pas pratiques, si l'on prend en compte l'ensemble précieux de timeout de session, en utilisant PHP, .NET ou dans le fichier Application.cfc pour les développeurs Coldfusion. L'heure définie par la solution ci-dessus doit être synchronisée avec le délai d'expiration de la session côté serveur. Si les deux ne se synchronisent pas, vous pouvez rencontrer des problèmes qui ne feront que frustrer et dérouter vos utilisateurs. Par exemple, le délai d'expiration de la session côté serveur peut être défini sur 60 minutes, mais l'utilisateur peut croire qu'il est sûr, car la capture du temps d'inactivité JavaScript a augmenté le temps total qu'un utilisateur peut passer sur une seule page. L'utilisateur peut avoir passé du temps à remplir un long formulaire, puis va le soumettre. Le délai d'expiration de la session peut démarrer avant que la soumission du formulaire ne soit traitée. J'ai tendance à accorder 180 minutes à mes utilisateurs, puis utilisez JavaScript pour déconnecter automatiquement l'utilisateur. Essentiellement, en utilisant une partie du code ci-dessus, pour créer un minuteur simple, mais sans la partie d'événement de capture de la souris. De cette façon, mon temps côté client et côté serveur se synchronise parfaitement. Il n'y a pas de confusion, si vous affichez l'heure à l'utilisateur dans votre interface utilisateur, car cela réduit. Chaque fois qu'une nouvelle page est accessible dans le CMS, la session côté serveur et le minuteur JavaScript sont réinitialisés. Simple et élégant. Si un utilisateur reste sur une seule page pendant plus de 180 minutes, je pense qu'il y a un problème avec la page, en premier lieu. car il diminue. Chaque fois qu'une nouvelle page est accessible dans le CMS, la session côté serveur et le minuteur JavaScript sont réinitialisés. Simple et élégant. Si un utilisateur reste sur une seule page pendant plus de 180 minutes, je pense qu'il y a un problème avec la page, en premier lieu. car il diminue. Chaque fois qu'une nouvelle page est accessible dans le CMS, la session côté serveur et le minuteur JavaScript sont réinitialisés. Simple et élégant. Si un utilisateur reste sur une seule page pendant plus de 180 minutes, je pense qu'il y a un problème avec la page, en premier lieu.

JavaScript pur avec un temps de réinitialisation et des liaisons correctement définis via addEventListener

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

(Partiellement inspiré par la bonne logique de base d'Equiman plus haut dans ce fil.)

sessionExpiration.js

sessionExpiration.js est léger mais efficace et personnalisable. Une fois implémenté, utilisez sur une seule ligne:

sessionExpiration(idleMinutes, warningMinutes, logoutUrl);

• Affecte tous les onglets du navigateur, pas un seul.
• Écrit en JavaScript pur , sans dépendances. Entièrement côté client.
• (Si vous le souhaitez.) A une bannière d'avertissement et un compte à rebours , qui sont annulés par l'interaction de l'utilisateur.
• Incluez simplement sessionExpiration.js et appelez la fonction, avec les arguments [1] nombre de minutes d'inactivité (dans tous les onglets) jusqu'à ce que l'utilisateur soit déconnecté, [2] nombre de minutes d'inactivité jusqu'à ce que l'avertissement et le compte à rebours s'affichent, et [3] URL de déconnexion.
• Mettez le CSS dans votre feuille de style. Personnalisez-le si vous le souhaitez. (Ou sautez et supprimez la bannière si vous ne le souhaitez pas.)
• Si vous ne voulez la bannière d'avertissement cependant, vous devez mettre un vide div avec l' ID sessExpirDiv sur votre page (une suggestion met dans le pied de page) .
• Désormais, l'utilisateur sera automatiquement déconnecté si tous les onglets ont été inactifs pendant la durée donnée.
• Facultatif: vous pouvez fournir un quatrième argument (URL serverRefresh) à la fonction, afin qu'un minuteur de session côté serveur soit également actualisé lorsque vous interagissez avec la page.

Ceci est un exemple de ce à quoi il ressemble en action, si vous ne changez pas le CSS.

J'ai écrit un simple plugin jQuery qui fera ce que vous cherchez.

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

Le script écoutera la souris, le clavier, le toucher et d'autres événements personnalisés d'inactivité (inactifs) et déclenchera des événements globaux d '"activité" et "d'inactivité".

J'espère que cela t'aides :)

Juste quelques réflexions, une ou deux pistes à explorer.

Est-il possible d'avoir une fonction exécutée toutes les 10 secondes, et de faire vérifier une variable "compteur"? Si c'est possible, vous pouvez avoir un survol de la page, n'est-ce pas? Si tel est le cas, utilisez l'événement mouseover pour réinitialiser la variable "compteur". Si votre fonction est appelée et que le compteur est au-dessus de la plage que vous prédéterminez, alors faites votre action.

Encore une fois, juste quelques réflexions ... J'espère que ça aide.

J'ai testé ce fichier de travail de code:

var timeout = null;
    var timee = '4000'; // default time for session time out.
    $(document).bind('click keyup mousemove', function(event) {

    if (timeout !== null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
              timeout = null;
            console.log('Document Idle since '+timee+' ms');
            alert("idle window");
        }, timee);
    });

Voici la meilleure solution que j'ai trouvée: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/

Voici le JS:

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

Vous pouvez utiliser la solution mentionnée ci-dessous

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}

J'utilise cette approche, car vous n'avez pas besoin de réinitialiser constamment l'heure à laquelle un événement se déclenche, mais nous enregistrons simplement l'heure, cela génère le point de départ inactif.

           function idle(WAIT_FOR_MINS, cb_isIdle) {
            var self = this, 
                idle,
                ms = (WAIT_FOR_MINS || 1) * 60000,
                lastDigest = new Date(),
                watch;
            //document.onmousemove = digest;
            document.onkeypress = digest;
            document.onclick = digest;

            function digest() {
               lastDigest = new Date(); 
            }
            // 1000 milisec = 1 sec
            watch = setInterval(function(){
                if (new Date() - lastDigest > ms && cb_isIdel) {
                    clearInterval(watch);
                    cb_isIdle();
                }

            }, 1000*60);    
        },

Vous pourriez probablement détecter l'inactivité sur votre page Web à l'aide des astuces de déplacement de souris répertoriées, mais cela ne vous dira pas que l'utilisateur n'est pas sur une autre page dans une autre fenêtre ou un autre onglet, ou que l'utilisateur est dans Word ou Photoshop, ou WOW et ne regarde tout simplement pas votre page pour le moment. En général, je fais juste la prélecture et je compte sur le multitâche du client. Si vous avez vraiment besoin de cette fonctionnalité, vous faites quelque chose avec un contrôle ActiveX dans Windows, mais c'est moche au mieux.

Voici un service AngularJS pour accomplir en Angular.

/* Tracks now long a user has been idle.  secondsIdle can be polled 
   at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
    var self = {
        secondsIdle: 0,
        init: function(){
            $(document).mousemove(function (e) {
                self.secondsIdle = 0;
            });
            $(document).keypress(function (e) {
                self.secondsIdle = 0;
            });
            $interval(function(){
                self.secondsIdle += 1;
            }, 1000)
        }
    }
    return self;
}]);

Gardez à l'esprit que ce vérificateur inactif s'exécutera pour toutes les routes, il doit donc être initialisé lors .run()du chargement de l'application angulaire. Ensuite, vous pouvez utiliser idleChecker.secondsIdleà l'intérieur de chaque itinéraire.

myApp.run(['idleChecker',function(idleChecker){
    idleChecker.init();
}]);

Debounce en fait une excellente idée! Voici la version pour les projets gratuits jQuery:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false); 

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 ) 
}

Aussi simple que possible, détectez uniquement les mouvements de la souris:

var idle = false;

document.querySelector('body').addEventListener('mousemove', function(e) {
    if(idle!=false)idle = false;
});

var idleI = setInterval(function()
{   
    if(idle == 'inactive')
    {
        return;
    }

    if(idle == true)
    {
        idleFunction();
        idle = 'inactive';
        return;
    }

    idle = true;
}, 30000);// half the expected time, idle will trigger after 60s in this case.

function idleFuntion()
{
   console.log('user is idle');
}

Eh bien, vous pouvez attacher un événement de clic ou de déplacement de souris au corps du document qui réinitialise une minuterie. Avoir une fonction que vous appelez à des intervalles temporisés qui vérifie si la minuterie est sur une durée spécifiée (comme 1000 millis) et commencez votre préchargement.

Javascript n'a aucun moyen de dire l'utilisation du processeur. Cela casserait les javascript du bac à sable à l'intérieur.

En dehors de cela, accrocher les événements onmouseover et onkeydown de la page fonctionnerait probablement.

Vous pouvez également définir use setTimeout dans l'événement onload pour planifier une fonction à appeler après un délai.

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);