czwartek, 5 stycznia 2012

Wykrywanie interakcji użytkownika

Poniżej zamieszczam prosty kod umożliwiający wykrycie interakcji użytkownika z przeglądarką internetową.
'keydown keyup mousemove mousedown mouseup'.split(' ').map(function(evtName){
  window.addEventListener(evtName, function(e){
    console.log(e.type);
  }, false);
});
Powyższy kawałek kodu można łatwo rozbudować, tworząc obiekt pozwalający na proste odczytanie czy użytkownik jest obecny na stronie.
var idleDetection = (function(delay){
  if( typeof delay === 'undefined' ){
    delay = 6e4; // 60s
  }
  var t;

  var interaction = function(){
    t = Date.now();
  };
  'keydown keyup mousemove mousedown mouseup'.split(' ').map(function(evtName){
    window.addEventListener(evtName, interaction, false);
  });
  interaction();

  return Object.create(null, {
    idle: {get: function(){
      return Date.now() - t >= delay;
    }}
  });
})(2e4);
Konstruktor funkcji przyjmuje jeden opcjonalny parametr, który jest wartością czasu braku interakcji użytkownika, po upłynięciu którego użytkownik zostaje uznany za nieobecnego na stronie. Domyślna wartość tego czasu wynosi 1 minutę. Poniższy kawałek kodu demonstruje działanie funkcji.
setInterval(function(){
  document.title = idleDetection.idle ? 'idle' : 'welcome back';
}, 1e3);