イベントフィルター

debounce

関数の実行を指定時間だけ遅らせ、その待っている間にまた関数が呼び出されたら、その時点を起点にさらに実行を遅らせます。結果として、関数の呼び出しが連続しても最後の1回だけが実行されるようになります。

リサイズイベントやマウスムーブイベントなどの処理でプログラムのパフォーマンス向上に使える場合があります。これらのイベントは、連続で発生するがそのすべてを処理する必要はなく、最後だけ処理すれば十分な場合が多くあるからです。

element.addEventListener("resize", debounce(myEventHandler, 300))

名前	型	デフォルト	説明
fn	関数	省略不可	オリジナルの関数。オリジナルの関数は、任意の数の引数を受け取り、値を返却しない関数です。
delay	number	省略不可	関数の実行を遅らせる時間をミリ秒（1/1000秒）で指定します。

名前	型	説明
fn	関数	フィルタを適用された関数

関数の実行が指定した間隔の内で高々1回になるように調節します。

スクロールイベントなどの処理でプログラムのパフォーマンス向上に使える場合があります。これらのイベントは、連続で発生するがそのすべてを処理するとプログラムの実行が遅くなりすぎる場合があるからです。

element.addEventListener("scroll", throttle(myEventHandler, 300))

名前	型	デフォルト	説明
fn	関数	省略不可	オリジナルの関数。オリジナルの関数は、任意の数の引数を受け取り、値を返却しない関数です。
interval	number	省略不可	関数の実行間隔をミリ秒（1/1000秒）で指定します。

名前	型	説明
fn	関数	フィルタを適用された関数