Calculer le temps d'inactivité sur une page Web avec JavaScript

La fonction TimeIdle() permet de calculer le temps passé inactivement sur une page Web, lorsque l'utilisateur n'interagit pas avec la page.

Elle utilise l'API Web Performance pour effectuer des mesures précises en millisecondes, indépendamment de l'horloge du système de l'utilisateur.

TimeIddle()

Retourne un objet détecteur de temps passé inactivement sur la page.

Syntaxe

new TimeIdle(intervalles_de_raffraichissement, interactions);

Paramètres

intervalles_de_rafraichissement(Number)

Le paramètre intervalles_de_rafraichissement de l'interface TimeIddle() définit le délai en millisecondes avant chaque rafraichissement de la détection d'inactivité sur la page.
Si ce paramètre est omis, la valeur par défaut 50 sera utilisée.

interactions(Array)

Le paramètre interactions de l'interface TimeIddle() définit la liste des évènements d'activités qui réinitialise la durée d'inactivité calculée.
Si ce paramètre est omis, les évènements par défaut suivants seront utilisés : focus, mousemove, mousedown, touchstart, touchmove, click, keydown, scroll.

Méthodes de l'instance

detecteur.addListener()

La méthode addListener() de l'interface TimeIdle() permet d'ajouter un écouteur de temps passé inactivement sur la page.

Syntaxe

detecteur.addListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode addListener() définit un écouteur de temps passé inactivement sur la page, qui sera ajouté au détecteur.
Il s'agit d'une fonction de rappel, dont l'argument contiendra le nombre de millisecondes passées.

detecteur.removeListener()

La méthode removeListener() de l'interface TimeIddle() supprime un écouteur du détecteur de temps passé inactivement sur la page.

Syntaxe

detecteur.removeListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode removeListener() définit un écouteur de temps passé inactivement sur la page, qui sera supprimé du détecteur.

var detecteur = new TimeIdle();
detecteur.start();

var ecouteur = function(ms){
    if (ms >= 3000) {
        detecteur.stop(); // stoppe le minuteur
        detecteur.clear(); // remet à zéro le compteur
        detecteur.removeListener(ecouteur); // supprime l'écouteur
        console.log('Temps inactif >= 3s');
    }
};

detecteur.addListener(ecouteur);

function TimeIdle(m,x){m=m||50;x=x||['focus','mousemove','mousedown',
'touchstart','touchmove','click','keydown','scroll'];var w=window,
d=document,_=this,a=[],n=function(){return performance.now();},o=n(),
e=0,t=null,s=function(){t=setTimeout(function(){e+=(n()-o);o=n();
a.forEach(function(l){l(e);});s();},m);};_.clear=function(){e=0;o=n();
};_.getTime=function(){return Math.round(e);};_.start=function(){
if(t===null){s();}};_.stop=function(){clearTimeout(t);t=null;};
_.addListener=function(l){if(a.indexOf(l)===-1){a.push(l);}};
_.removeListener=function(l){var i=a.indexOf(l);if(i>-1){a.splice(i,1);
}};var it=null,il=function(){clearTimeout(it);ir();it=setTimeout(ia,m);
_.clear();},ia=function(){x.forEach(function(k){
w.addEventListener(k,il,!1);});},ir=function(){x.forEach(function(k){
w.removeEventListener(k,il);});};ia();return _;}