[JavaScript | TypeScript] 一定時間ごとに実行するThrottleクラスを作りたい

2015/05/16

こんにちは。きんくまです。

throttleとdebounceと言われているイベント実行のタイミングを制御する仕組みがあります。
どちらも、イベント発行がたくさんありすぎて困るときに、その実行タイミングを減らすものです。

例えば、マウスを動かしたときは、すごくたくさんのmousemoveイベントが発行されます。
そのときに、例えば時間がかかる重い処理を実行したいとします。
mousemoveイベント全部で重い処理を実行してしまうと、ブラウザがものすごく重くなってしまいハングアップしてしまいます。
このとき、毎回ではなく一定のタイミングで実行できれば、重たい処理だったとしても問題ないです。

throttle … 一定時間ごとに実行させる
debounce … 一番最後のタイミングで実行

ということみたいです。で、今回はthrottleの方。ちなみにdebounceも実装自体はほとんど変わらないみたいですね。

throttle

module kk {
    export class ThrottleExecutor {
        protected _timerId:number;
        protected _lastExecuteTime:number;
        protected _interval:number;
        protected _callback:()=>void;

        constructor(interval:number, callback:()=>void){
            this._timerId = null;
            this._lastExecuteTime = null;
            this._interval = interval;
            this._callback = callback;
        }

        execute(){
            var now = (new Date()).getTime();
            if(this._lastExecuteTime != null && now < this._lastExecuteTime + this._interval){
                clearTimeout(this._timerId);
                this._timerId = setTimeout(()=>{
                    this._timerId = null;
                    this._lastExecuteTime = now;
                    this._callback();
                }, this._interval);
            }else{
                this._lastExecuteTime = now;
                this._callback();
            }
        }

        cancel(){
            if(this._timerId != null){
                clearTimeout(this._timerId);
                this._timerId = null;
            }
            this._lastExecuteTime = null;
        }
    }
}

今回のソースコードの元です。どうもです。オリジナルはクロージャーを使っていたのですが、TypeScriptではクラスにしました。
>> Throttling function calls

使ってみる

var executor = new kk.ThrottleExecutor(1000, ()=>{
    console.log('execute', (new Date()).getTime());
});
$(window).mousemove(()=>{
    executor.execute();
});

上のサンプルコードはマウスを動かすと文字列をconsoleに1秒（1000ms）ごとに出力するようにしてみました。
どんなにマウスを高速に動かしても1秒ごとにしか出力されません。

うーん、べんり♪