throttle / debounce とは何か

Lodash の throttle / debounce のインターフェースを例に説明する。

throttle とは

https://lodash.com/docs/4.17.15#throttle

• callback と wait を引数に受けとり throttle 化した関数を返す
• throttle 化した関数は、wait に指定した時間分 callback の実行を延期する
• 延期中の再呼び出しによって再延期はされず、延期中の最後の呼び出しだけ callback が実行される

例

• 0.5s 間隔で throttle する。コールバックにはキー入力した値をプリントする処理を渡す
• 2.0s の間、0.1s の間隔でキー入力しつづける
• 0.5, 1.0, 1.5, 2.0 で発火する。4回にわけてキー入力した値がプリントされる

debounce とは

https://lodash.com/docs/4.17.15#debounce

• callback と wait を引数に受けとり debounce 化した関数を返す
• debounce 化した関数は、wait に指定した時間分 callback の実行を延期する
• 延期中の再呼び出しによって wait 時間分 callback の実行が再延期される

例

• 0.5s 間隔で debounce する。コールバックにはキー入力した値をプリントする処理を渡す
• 2.0s の間、0.1s の間隔でキー入力しつづける
• 2.5 で発火する。1回だけキー入力した値がプリントされる