我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”，它会用AJAX搜索每个键:“W”，“Wi”，“Win”，“Wind”，“Windo”，“Window”，“Windows”。
我想有一个延迟，所以它只在用户停止输入200毫秒时搜索。
在keyup函数中没有这个选项，我尝试了setTimeout，但它不起作用。
我该怎么做呢?
当前回答
jQuery:
变量超时 = 空; $（'#input'）.keyup（function（） { 清除超时（超时）; 超时 = 设置超时（（） => { console.log（$（this）.val（））; }, 1000); }); <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script> <输入类型=“文本” id=“输入” 占位符=“在此处键入...”/>
纯Javascript:
let input = document.getElementById('input'); 让timeout = null; 输入。addEventListener('keyup'，函数(e) { clearTimeout(超时); timeout = setTimeout(函数(){ console.log(价值:,input.value); }, 1000); })； <input type="text" id="input" placeholder=" type here…"/>
其他回答
将CMS的答案与Miguel的答案相结合，产生了允许并发延迟的健壮解决方案。
var delay = (function(){
var timers = {};
return function (callback, ms, label) {
label = label || 'defaultTimer';
clearTimeout(timers[label] || 0);
timers[label] = setTimeout(callback, ms);
};
})();
当您需要单独延迟不同的操作时，请使用第三个参数。
$('input.group1').keyup(function() {
delay(function(){
alert('Time elapsed!');
}, 1000, 'firstAction');
});
$('input.group2').keyup(function() {
delay(function(){
alert('Time elapsed!');
}, 1000, '2ndAction');
});
在ES6中，也可以使用箭头函数语法。
在本例中，在调用searchFunc发出查询请求之前，在用户完成输入之后，代码将keyup事件延迟400ms。
const searchbar = document.getElementById('searchBar');
const searchFunc = // any function
// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
let timer = null;
const delay = (func, ms) => {
timer ? clearTimeout(timer): null
timer = setTimeout(func, ms)
}
return delay
})();
searchbar.addEventListener('keyup', (e) => {
const query = e.target.value;
delayKeyUp(() => {searchFunc(query)}, 400);
})
更新后的Typescript版本:
const delayKeyUp = (() => {
let timer: NodeJS.Timeout;
return (func: Function, ms: number) => {
timer ? clearTimeout(timer) : null;
timer = setTimeout(() => func(), ms);
};
})();
使用jQuery插件bindWithDelay:
element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
在CMS的回答的基础上，这里有一个新的延迟方法，它保留了“this”的用法:
var delay = (function(){
var timer = 0;
return function(callback, ms, that){
clearTimeout (timer);
timer = setTimeout(callback.bind(that), ms);
};
})();
用法:
$('input').keyup(function() {
delay(function(){
alert('Time elapsed!');
}, 1000, this);
});
看一下autocomplete插件。我知道它允许您指定延迟或最小字符数。即使你最终没有使用这个插件，浏览代码也会给你一些关于如何自己实现它的想法。
