jQuery .keyup() ハンドラーに入力遅延を追加する方法

.keyup() ハンドラーで入力遅延を実装する方法

キーが入力されるたびにアクションをトリガーする検索フィールドを操作する場合が押された場合は、遅延を実装して不必要なクエリを減らすことが有益な場合があります。この記事では、入力の一時停止後にのみクエリが実行されるようにして、この遅延を実現する方法について説明します。

.keyup() ハンドラーには、遅延を導入するための固有のオプションがありません。ただし、カスタム関数を使用してこの動作を実現できます。一般的なアプローチの 1 つは、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);
  };
}

この関数は、callback (遅延後に実行する関数) と ms (ミリ秒単位の遅延時間) の 2 つのパラメーターを受け取ります。

.keyup() ハンドラーでこの関数を利用するには:

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

この例では、 「input」フィールドの .keyup() イベントは、キーが押されるたびに 500 ミリ秒待機する遅延関数をトリガーします。ユーザーが 0.5 秒入力をやめた場合にのみコールバックが実行され、入力フィールドの現在の値が記録されます。

以上がjQuery .keyup() ハンドラーに入力遅延を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。