Keyup イベント処理を遅らせて AJAX 検索を最適化するにはどうすればよいですか?

ユーザー入力時のキーアップ ハンドラーの実行の遅延

検索フィールドですべてのキーストロークを検索すると、過剰な AJAX リクエストが発生する可能性があります。これを解決するには、ユーザーが指定された期間入力を停止した場合にのみ検索をトリガーする遅延を導入することが望ましいです。 setTimeout のような従来の方法は効果的であることが証明されていません。

代替アプローチには次の関数が含まれます:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

keyup イベント ハンドラーとの統合は次のように実現できます:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

この関数はコールバックとミリ秒 (ms) 単位の遅延を受け入れます。これは、clearTimeout を利用してタイマーの重複を防ぎ、キーアップ イベントごとに新しいタイマーをスケジュールします。遅延の有効期限が切れると、元のイベント ハンドラーに渡されたコンテキストと引数を使用してコールバックが呼び出されます。

このソリューションは、ユーザーが指定された期間入力を停止するまでキーアップ ハンドラーの実行を効果的に遅延させ、検索を最適化します。経験を積んで不要な AJAX リクエストを削減します。

以上がKeyup イベント処理を遅らせて AJAX 検索を最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。