Jump to the content

npmのthrottle-debounceがシンプルで使いやすい

JavaScript

    npmのthrottle-debounceがシンプルで使いやすい

    どうも、イソップです。

    JavaScriptの連続処理を間引く方法として、throttleとdebounceが使われるのは有名です。

    よく使われるのは、jQueryのthrottle/debounceプラグインUnderscore.jslodash.jsのthrottle、debounceメソッドを使う事が多いのではないかと思います。

    しかし、jQueryを使わない場合や、ライブラリを読み込んでもそのほとんどの機能を使わないとなると、 違う実装方法が欲しいですよね。

    そこで見つけたのが、npmに登録されている throttle-debounce です。

    CommonJSスタイル(require)で読み込むので、BrowserifyやWebpackなどのモジュールバンドラーを使う際にも使いやすいです。

    実際に試して使いやすかったので、今日はthrottle-debounceを紹介したいと思います。

    throttle-debounceとは

    throttle-debounceは、連続処理の間引き(throttle)や連続処理後の遅延実行(debounce)を提供するモジュールです。

    機能はjQueryのthrottle/debounceプラグインと同じです。 さっきも書いたように、CommonJSスタイルで読み込みます。

    何よりシンプルなのが特徴です。
    throttleやdebounceを自前で用意する人もいますが、ぼくはrequireを多用するので、このモジュールがいいと思っています。

    throttle-debounceの使い方

    インストール

    npm install でインストールします。

    npm install throttle-debounce --save
    

    throttle(delay, [ noTrailing, ] callback, debounceMode)

    throttleは、連続処理を delay の間隔で間引く関数です。
    特に、resizeイベントやscrollイベントで使うのが効果的です。

    var throttle = require('throttle-debounce/throttle');
    
    window.addEventListener('scroll', throttle(200, function() {
        // scroll function
    }), false);
    
    window.addEventListener('resize', throttle(200, function() {
        // resize function
    }), false);
    

    delay

    処理を間引く間隔をミリ秒で指定します。イベント処理の場合は 100250 が使いやすいです。

    noTrailing

    連続処理が終わる時に、登録したコールバック関数を実行するかどうか。 この引数は省略可能で、初期値はfalse

    throttle noTrailing option

    何も指定しない、もしくは false の場合は、連続処理が終わる際に登録した関数が必ず実行されます。
    trueを設定すると、最後には実行されず、delay で指定した間隔でのみ実行されます。

    callback

    delay の間隔で実行されるコールバック関数。
    イベント処理の引数はコールバック関数にそのまま渡されます。

    debounceMode

    コールバック関数の実行回数を1回にします。省略可能。

    true を設定すると、連続処理の開始時に1度だけ実行します。
    false を指定すると、連続処理の終了時に1度だけ実行します。

    debounce(delay, [ atBegin, ] callback)

    debounceは、連続処理が終わってから delay 後に一度だけコールバックを実行する関数です。
    throttle同様、resizeイベントやscrollイベントで使うのが効果的です。

    var debounce = require('throttle-debounce/debounce');
    
    window.addEventListener('scroll', debounce(250, function() {
        // scroll function
    }), false);
    
    window.addEventListener('resize', debounce(250, function() {
        // resize function
    }), false);
    

    delay

    コールバック関数が実行される遅延時間。ミリ秒で指定します。

    atBegin

    コールバック関数の実行タイミングを指定します。 デフォルトでは連続処理の後に実行されますが、atBegin をtrueにすると、 連続処理の開始時 delay の遅延後に実行されます。

    省略することが可能です。

    callback

    delay の遅延後に実行されるコールバック関数。
    イベント処理の引数はコールバック関数にそのまま渡されます。

    対応ブラウザ

    主要モダンブラウザとIE8以上に対応しています。

    リポジトリ

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×