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以上に対応しています。

リポジトリ

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.