サイト訪問者がしばらく何もしてなかったり別のウィンドウに移ってしばらくした場合、
そのタイミングを知りたいケースがあります。
そんなライブラリを探してみたのですが、調度良いのがなかったので作りました。
jQueryを前提にしていますが、短いコードなので簡単に依存を切れると思います。
使い方
以下のように書くと5秒放置したときに”idle”と表示されます。
“idle”状態で画面に戻ったりマウスが動いたりすると復帰、”back”と表示されます。
new IdleTimer( 5000, function(){ console.log('idle'); }, function(){ console.log('back'); } );
コード
/* idletimer.js author:nakagawa@ville.jp licence:NYSL */ var IdleTimer = function(){ this.isIdle = false; this.timestamp = null; this.timerId = null; this.init.apply(this, arguments); } IdleTimer.prototype = { init : function(timeout, onIdle, onBack){ this.timeout = timeout; this.onIdle = onIdle; this.onBack = onBack; this.setEvents(); this.setIdleTimeout(); }, setEvents : function(){ var self = this; var doc = $(document); doc.ready(function(){ doc.mousemove(function(){ self.active();}); try{ doc.scroll(function(){ self.active(); }); }catch(e){} try{ doc.keydown(function(){ self.active(); }); }catch(e){} try{ doc.click(function(){ self.active(); }); }catch(e){} }); }, setIdleTimeout : function(){ var self = this; this.timestamp = new Date().getTime() + this.timeout; if(this.timerId) clearTimeout(this.timerId); this.timerId = setTimeout(function(){ self.idle(); }, this.timeout); }, idle : function(){ var self = this; var t = new Date().getTime(); if(t < this.timestamp){ this.timerId = setTimeout(function(){ self.idle(); }, self.timestamp - t); return; } this.isIdle = true; this.onIdle.call(); }, active : function(){ var t = new Date().getTime(); this.timestamp = t + this.timeout; if(this.isIdle){ this.setIdleTimeout(this.timeout); this.onBack.call(); } this.isIdle = false; } };