Checkuseractivity : detecter l'inactivité du visiteur

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 192 fois - Téléchargée 17 fois

Contenu du snippet

Suite à un post sur le forum j'ai fais ce code... donc je le poste tant qu'à faire si ça peut servir... qui plus est si quelqu'un a un commentaire sur la façon de procéder pour surveiller l'inactivité du visiteur ça peut être intéressant même si, comme dit sur le topic d'origine, je ne suis pas fan de ce genre de contrôle coté client vu qu'on a, normalement, les outils adéquats coté serveur... bref... .. .

Ce code "surveille" donc l'inactivité de l'internaute et exécute un callback si l'inactivité dépasse x minutes... pour cela je me base sur l'évènement onmousemove et justement ça peut être un point de discussion car il y a surement moyen de faire plus propre... à mon goût trop d'appel à la méthode reset() si l'utilisateur est actif... mais bon je l'ai codé assez rapidement à vrai dire... j'en ai profité pour fait quelques ajouts/corrections et le commenter... .. .

Testé uniquement sous IE7 et firefox3... .. .

@ tchaOo°

Source / Exemple :


/*

  • Object checkUserActivity
  • Check if user is activ or not
*
  • @copyright kankrelune
  • @license LGPL - www.gnu.org/licenses/lgpl.html
  • /
var checkUserActivity = { timeout: 60, // (int) timeout in minutes loop: true, // (bool) restart check after callback exec timer: null, // (obj) timeout id callback: null, // (function) timeout function cWrapper: null, // (function) callback wrapper eWrapper: null, // (function) event callback wrapper /*
  • start activity check
  • @access public
  • @arg function callback the callback function
  • @arg int timeout the timeout in minutes (optional)
  • /
start: function( callback, timeout) { this.timeout = (this.timeout*60*1000); this.setTime(timeout); this.setCallback(callback); this._startObserving(); this.reset(); }, /*
  • stop activity check
  • @access public
  • /
stop: function() { this.loop = false; this._stopObserving(); if(this.timer) { clearTimeout(this.timer); this.timer = null; } }, /*
  • set the callback function
  • @access public
  • @arg function callback the callback function
  • /
setCallback: function(callback) { if(typeof callback == "function") { this.callback = callback; } else { this.callback = function() {}; } this.cWrapper = function() { checkUserActivity.callback.apply(checkUserActivity); if(checkUserActivity.loop) { checkUserActivity.reset(); } else if(checkUserActivity.timer) { checkUserActivity.stop(); } }; }, /*
  • set the timeout
  • @access public
  • @arg int timeout the timeout in minutes
  • /
setTime: function(timeout) { if(!isNaN(timeout)) { this.timeout = (timeout*60*1000); if(this.timer) { this.reset(); } } }, /*
  • reset the timeout
  • @access public
  • /
reset: function() { if(this.timer) { clearTimeout(this.timer); this.timer = null; } this.timer = setTimeout( this.cWrapper, this.timeout); }, /*
  • register event callback wrapper
  • @access private
  • /
_startObserving: function() { if(!this.eWrapper) { this.eWrapper = function(){ checkUserActivity.reset(); }; if(window.addEventListener) { window.addEventListener("mousemove", this.eWrapper, true); } else { window.attachEvent("onmousemove", this.eWrapper); } } }, /*
  • unregister event callback wrapper
  • @access private
  • /
_stopObserving: function() { if(this.eWrapper) { if (window.removeEventListener) { window.removeEventListener("mousemove", this.eWrapper, true); } else { window.detachEvent("onmousemove", this.eWrapper); } this.eWrapper = null; } } }; /*
  • exemple d'utilisation lancer la page et attendez ou faites autre chose pendant 30s...
*
  • le calllback est exécuté dans le contexte de checkUserActivity
  • les propriétées et methodes de ce dernier sont donc directement
  • accessible depuis le callback...
  • /
checkUserActivity.start( function() { // un petit message alert("Ca fait "+(this.timeout/1000).toFixed(0)+" secondes que tu est là comme ça\ndevant ton écran, pationnant n'est il pas... .. ."); // on change le callback pour le prochain appel this.setCallback(function() { // second message puis on arrete alert("Voila voila... 2nd callback...\n"+(this.timeout/500).toFixed(0)+" secondes à rien faire... trépidant cet exemple... .. ."); this.stop(); } ); }, 0.25 );

Conclusion :


Hésitez pas pour les avis... .. .

A voir également

Ajouter un commentaire

Commentaires

kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
Merci...

Mais du coup personne n'a d'avis/idée pour améliorer ça... j'ai pas eu le temps d'y repenser mais j'aime pas ce setTimeout() à chaque mouvement de souris... ça va si l'utilisateur est rapidement inactif mais pour un visiteur actif sur la page ça me plait moyen pas trop du tout... .. .

@ tchaOo°
cs_Julien39
Messages postés
6413
Date d'inscription
mardi 8 mars 2005
Statut
Modérateur
Dernière intervention
17 mai 2018
254 -
C'est écrit proprement et bien commenté.
kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
Merci au fait jdmcreator pour le test sous safari...

@ Abdelaziz... j'avais pas vu le onmousemove dans le body... bref tu as réécris en tout pas beau tout pas portable une partie de mon code... dans quel but... .. ?

@ tchaOo°
kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
lol... toujours le mot pour rire abdelaziz... ton code ne détecte rien du tout là il boucle juste une alerte... .. .

@ tchaOo°
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Salut,

Pour surveiller l'inactivité de l'internaute on peut le faire tout simplement comme ça :

<html>
<head>
</head>

<script type="text/javascript">
M=0;
C=0;
var timer;
function mouv() {
M++;
if (M==15){C++,alert('hooooo '+C+' fois')} // On déclenche un événement après 15 secondes d'inactivité
timer=setTimeout('mouv();',1000);
}
</script>

</html>

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.