MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK 社長ブログ

アイドル状態と復帰を判定するJS

Pocket

サイト訪問者がしばらく何もしてなかったり別のウィンドウに移ってしばらくした場合、
そのタイミングを知りたいケースがあります。
そんなライブラリを探してみたのですが、調度良いのがなかったので作りました。
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;
    }
};

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK 社長ブログ