コード実装
JavaScript
function debounce(fn,delay){
let timerId;
return function(...args){
clearTimeout(timerId);
timerId=setTimeout(()=>{
fn.apply(this,args);
},delay);
};
}
//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;デバウンス関数は、JavaScript において高頻度且つ時間のかかる操作を最適化するための中核的ツールです。その核心ロジックは「関数の実行を遅延させる＋繰り返される遅延をキャンセルする」ことで、短時間内に複数回トリガーされた関数が、最後のトリガー後に指定された遅延時間を待ってからのみ実行されるよう保証し、無駄な呼び出しによるパフォーマンス低下を回避します。
その動作原理は「エレベーターのドアを閉める過程」に例えて理解できます：エレベーターのドアが開いた後、デフォルトで一定時間（例：2 秒）待ってから閉まります。この待機中に新しい乗客が入ってくる場合（関数が新たにトリガーされることに対応）、元の待機タイマーはキャンセルされ、カウントダウンが再開されます。カウントダウンが終了しても新しいトリガーがない場合に限り、「ドアを閉める」動作（関数の実行に対応）が行われます。
#関数デバウンシング
スニペット説明
適用シナリオ
- 高頻度トリガー：短時間内に関数が繰り返し呼び出される場合（例：ウィンドウのresizeイベント、インプットフィールドのinputイベント）。これは DOM イベントに限定されず、Node.js などの非 DOM 環境における高頻度関数呼び出しにも適用されます。
- 時間のかかる関数：呼び出される関数が CPU 集約型（例：ページレイアウトの計算、リフロー / リペイントを引き起こす大量の DOM 操作）または IO 集約型（例：ネットワークリクエスト、ファイルの読み書き）の操作である場合。1+1 の計算のような単純な操作にはデバウンスは必要ありません。
- 最後の結果を優先：短時間内の複数回の呼び出し結果の中で、最後の呼び出し結果だけを保持すればよい場合。例えばウィンドウサイズを調整した後は、最終的なサイズに対応するレイアウトだけが必要で、調整過程で生成されたレイアウトは無意味です。
おすすめスニペット
コメント
読み込み中...