[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は？

質問

検索フィールドがあります。今はすべてのキーに対応する検索を行います。もし誰かが "Windows "と入力したら、AJAXですべてのキー入力に対して検索を行います。「W", "Wi", "Win", "Wind", "Windo", "Window", "Windows "などです。

私は遅延を持たせたいので、ユーザーが200msの間タイピングを止めたときだけ検索します。

には、このためのオプションはありません。 keyup 関数を試してみました。 setTimeout しかし、うまくいきませんでした。

どうすればいいのでしょうか？

どのように解決するのですか？

私はこの小さな関数を同じ目的で使っています。ユーザーが一定時間入力を止めた後に関数を実行したり、次のように高い確率で発火するイベントで使用します。 resize :

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);
  };
}


// Example usage:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

どのように機能するか

は delay この関数が返すラップされた関数は、内部で個々のタイマーを処理し、各実行でタイマーは与えられた遅延時間で再起動されます。

タイマーが終了すると、コールバック関数が実行され、元のコンテキストと引数（この例では、jQuery のイベントオブジェクトと、DOM 要素を this ).

アップデート 2019-05-16

モダンな環境に対応するため、ES5とES6の機能を使って関数を再実装しました。

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

実装をカバーするのは テストセット .

より洗練されたものをお探しなら、jQuery の タイプウォッチ プラグインを使用します。