throttle と debounce の違い

こちらの説明がわかりやすかった

• throttleとdebounce
• lodash の debounce や throttle で簡単に負荷対策 - Qiita

debounce

連続して大量に繰り返される処理が指定時間内に何度発生しても最後の1回だけ実行するものです。 よく使われるのはresizeイベントです。「ウインドウサイズが変わったときに要素のサイズを変える」みたいなケースってありますよね。その時、ウインドウの端っこをつまんでぐりぐりとドラッグするイベントを全て取得しても意味がありません。マウスから手を話しresizeが完了したときのイベントをとれば十分です。

debounce は一定時間動きが止まったらイベントを発火させるようにすることと言える。たとえば↑の例だとウインドウの端っこをずっとドラッグされていたらイベントは発火しない

throttle

連続して大量に繰り返される処理を一定感覚で間引くものです。 よく使われるのはscrollイベントです。スクロールイベントをすべてハンドリングすると処理回数が多くなり、場合によってはスクロールがもっさりしてしまいますよね。それを防ぎます。

throttle で「1秒に1回にスロットルする」というふうに書くと、ウインドウの端っこをずっとドラッグされているときには毎秒イベントが発火する。