throttleとdebounceの違い。覚え方も考えてみた

コーディング

throttleとdebounceはいずれも繰り返し大量に発生する処理を間引いて、負荷を軽減させるための処理についた名前です。それぞれ間引き方に違いがあります。

この2つの違いをよく忘れがちなので、知識をイメージで補強することにしました。

throttle

繰り返し大量に発生する処理を一定間隔で間引くもの。

よく使う例として、スクロールのイベントがあります。例えば、画面のスクロールが一定量行われたら、classを付与するとか、グローバルヘッダーを固定したいとか、色を変えたいとか、よくあります。

スロットルは流体を制御する機構のひとつで、流路断面積を変化させて流量を制御する装置である。

スロットル - Wikipedia

機械に詳しくないですが、どのくらいアクセルを踏むかということでしょう。流量の制御であって処理が行われない、ということではないですね。

debounce

繰り返し大量に発生する処理が終わった時に最後の1回だけ実行するもの。

よく使う例として、ウィンドウのリサイズイベントがあります。例えば、画面のサイズが変わったら画像やHTML要素のサイズも変えたいとか。リサイズ中はユーザーが必要とするサイズはまだわからないので、リサイズを終えたタイミングで処理が走れば十分です。

跳ね返りを抑えること

debounceの意味・使い方|英辞郎 on the WEB

バスケットボールのドリブルをイメージするといいかもしれません。地面に当たった時が処理が終わった時でその時に突いた回数がカウントされます。

モジュール

throttleやdebounceを使いたい場合、LodashUnderscore.jsにもありますが、これだけのために大きいモジュールは入れたくないもの。すこし調べたらまさにというものがありました。

throttleとdebounceがセットになったもの。

それぞれのもありました。

この記事を書いた人

村田 智 @murata_s
アートディレクター/デザイナー
詳しくみる→
カテゴリー
コーディング
タグ
  • JavaScript
公開日
更新日
文字数
849文字