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