Calculer le temps passé activement sur une page Web avec JavaScript

La fonction TimeActive() permet de calculer le temps passé sur une page Web active, soit le temps que la page a été affichée par l'internaute dans l'onglet actif de son navigateur.

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.

TimeActive()

Retourne un objet détecteur de temps passé sur la page lorsqu'elle est active.

Syntaxe

new TimeActive();

Paramètre

Aucun.

Méthodes de l'instance

detecteur.addListener()

La méthode addListener() de l'interface TimeActive() ajoute un écouteur au détecteur de temps passé activement 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é activement 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 TimeActive() supprime un écouteur du détecteur de temps passé activement 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é activement sur la page, qui sera supprimé du détecteur.

var detecteur = new TimeActive();
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 actif >= 3s');
    }
};

detecteur.addListener(ecouteur);

function TimeActive(m){m=m||50;var w=window,d=document,_=this,a=[],n=function(){
return performance.now();},o=n(),e=0,t=null,s=function(){t=setTimeout(function(){
if(d.visibilityState==='visible'&&d.hasFocus()){e+=(n()-o);o=n();a.forEach(function(l){
l(e);});}else{o=n();}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);}};return _;}