throttleとdebounceはいずれも繰り返し大量に発生する処理を間引いて、負荷を軽減させるための処理についた名前です。それぞれ間引き方に違いがあります。
この2つの違いをよく忘れがちなので、知識をイメージで補強することにしました。
throttleとdebounceの違い。覚え方も考えてみた
throttle
繰り返し大量に発生する処理を一定間隔で間引くもの。
よく使う例として、スクロールのイベントがあります。例えば、画面のスクロールが一定量行われたら、classを付与するとか、グローバルヘッダーを固定したいとか、色を変えたいとか、よくあります。
スロットルは流体を制御する機構のひとつで、流路断面積を変化させて流量を制御する装置である。
機械に詳しくないですが、どのくらいアクセルを踏むかということでしょう。流量の制御であって処理が行われない、ということではないですね。
debounce
繰り返し大量に発生する処理が終わった時に最後の1回だけ実行するもの。
よく使う例として、ウィンドウのリサイズイベントがあります。例えば、画面のサイズが変わったら画像やHTML要素のサイズも変えたいとか。リサイズ中はユーザーが必要とするサイズはまだわからないので、リサイズを終えたタイミングで処理が走れば十分です。
跳ね返りを抑えること
バスケットボールのドリブルをイメージするといいかもしれません。地面に当たった時が処理が終わった時でその時に突いた回数がカウントされます。
モジュール
throttleやdebounceを使いたい場合、LodashやUnderscore.jsにもありますが、これだけのために大きいモジュールは入れたくないもの。すこし調べたらまさにというものがありました。
throttleとdebounceがセットになったもの。
それぞれのもありました。