ドブン

dboun 関数は、関数の実行速度を制限するために設計されたユーティリティです。これにより、提供された関数 (fn) は、最後の呼び出しから指定された遅延 (遅延) が経過した後にのみ呼び出されることが保証されます。デフォルトでは、遅延は 400 ミリ秒に設定されています。

これは、提供された関数が過度に呼び出されることを防ぎ、サイズ変更、スクロール、入力など、頻繁に発生するイベントを処理する場合に特に役立ちます。

使用例

シナリオ: デバウンスを使用した入力の検索

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

この例では:

• handleSearch は、検索ロジックを処理する関数です。
• debouncedSearch は、入力の非アクティブ状態が 300 ミリ秒続いた後にのみ handleSearch が実行されるようにします。

パラメータ

1. fn (関数): デバウンス遅延の後に実行される関数。

   • これは、指定された遅延の後に呼び出されるコールバック関数です。

2. lay (数値、オプション): fn を呼び出す前に待機するミリ秒数。デフォルトは 400 ミリ秒です。

   • これによりデバウンス間隔が決まります。

返品

dboun 関数は、fn の新しいデバウンスされたバージョンを返します。返された関数は、返された関数が最後に呼び出されてから遅延ミリ秒が経過するまで fn の呼び出しを遅らせます。

仕組み

• 返された関数が呼び出されると、その関数に設定されている既存のタイマー (clearTimeout(timeout)) がクリアされます。
• その後、指定された遅延後に fn を呼び出すように新しいタイマーが設定されます (setTimeout)。
• 遅延期間が終了する前に返された関数が再度呼び出された場合、前のタイマーはクリアされてリセットされます。

実用的なアプリケーション

1. 入力処理: デバウンスにより、ユーザーが入力フィールドに入力する際のイベント ハンドラーの過剰な実行が防止されます。
2. サイズ変更イベント: ウィンドウのサイズ変更イベント ハンドラーをデバウンスすることでパフォーマンスを管理します。
3. スクロール イベント: スクロール イベント ハンドラーの実行頻度を制御することで、パフォーマンスのボトルネックを回避します。

注意事項

• 即時実行の後に遅延 (スロットルのような動作) が必要な場合、この関数はそのままではその機能を提供しません。
• 応答性とパフォーマンスのバランスをとるために、遅延がユースケースに適切であることを常に確認してください。

ブラウザの互換性

dboun 関数は最新の JavaScript/TypeScript 機能を使用するため、ほとんどの最新環境と互換性があります。古い環境の場合は、コードをトランスパイルすることを検討してください。

テスト

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

以上がドブンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。