debounce

デバウンス。関数が立て続けに呼ばれたとき、呼び出しが ms ミリ秒やんでから はじめて 実行します。最後の状態だけが問題になる場面、たとえば入力しながらの検索、ウィンドウのリサイズ、自動保存に向いています。

「途中の値も要る」ときは throttle を使ってください。

API

debounce(fn, ms?)

パラメーター

パラメーター	説明	型	既定値
fn	デバウンスする関数	Function	必須
ms	静かになるまでの時間（ミリ秒）	number	500

戻り値

呼び出し元の this と 最後の 引数を保つ、デバウンス済みの関数です。加えて次のものを持ちます。

メンバー	説明	型
cancel()	待機中の呼び出しを捨てる	() => void
flush()	待機中の呼び出しをいますぐ実行する（送信の直前など）	() => void
pending()	呼び出しが待機中かどうか	() => boolean

使用例

import { debounce } from 'ranuts';

const save = debounce((draft) => api.save(draft), 800);
input.addEventListener('input', (e) => save(e.target.value));

form.addEventListener('submit', () => save.flush()); // 最後の一打を落とさない
onUnmount(() => save.cancel());

補足

1. 実行されるのは最後の呼び出しだけで、引数もその最後のものが使われます。
2. this は呼び出し元から取られます。obj.handler() なら obj が見えます。
3. 後片づけでは必ず cancel() を呼んでください。 さもないと、待機中のタイマーが壊れた文脈へ発火します。
4. 型は完全につきます：引数と戻り値の型は fn から推論されます。