検索フィールドがあります。現在は、すべてのキーアップを検索します。したがって、誰かが「Windows」と入力すると、すべてのキーアップに対して AJAX で検索が行われます: 「W」、「Wi」、「Win」、「Windo」、「Window」、「Windows」。
遅延を設定して、ユーザーが 200 ミリ秒間入力を停止したときにのみ検索するようにします。
関数にはこのオプションがなくkeyup、試してみましたsetTimeoutが、機能しませんでした。
どうやってやるの？
ベストアンサー1
私はこの小さな関数を同じ目的で使用し、ユーザーが指定された時間入力を停止した後、または次のような高頻度で発生するイベントで関数を実行します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をご覧ください。タイプウォッチプラグイン。