Checkuseractivity : detecter l'inactivité du visiteur

Commenter

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... .. .
S'inscrire maintenant

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.

Du même auteur (kankrelune)