JavaScript 連続して関数を呼び出したくないときに便利なlodashのdebounce

mouseoverやscrollイベントが発火した際に何か処理を行いたいことはよくあることですが、これらのイベントは大量に発生するため、イベントが発火する度に関数を実行するとかなりの負荷がかかります。

lodashのdebounceを利用することで、連続する呼び出しを無視して最後に呼び出されたときだけ関数を実行することができます。

以下はhoge関数にdebounceを適用したコードです。

このコードを実行すると hoge5 のみが出力されます。つまり一番最後の呼び出しだけが実行されます。

const hoge = number => console.log('hoge' + number)
const debouncedHoge = _.debounce(hoge, 1000)

debouncedHoge(1)
debouncedHoge(2)
debouncedHoge(3)
debouncedHoge(4)
debouncedHoge(5)

第二引数の1000は、1秒待ってから実行します。(つまり、1秒間隔があいた場合に実行されます。)