如何延迟.keyup()处理程序，直到用户停止键入？
我有一个搜索栏。现在它会搜索每一个密钥键。因此，如果有人键入“Windows”，它将使用AJAX搜索每个键：“W”、“Wi”、“Win”、“Wind”、“Windo”、“Window”、“Windows”。
我希望有一个延迟，所以它只在用户停止键入200ms时才进行搜索。
在keyup函数中没有此选项，我尝试过setTimeout，但它不起作用。
我该怎么做呢？
回答 28
Stack Overflow用户
发布于 2009-12-16 02:45:40
我使用这个小函数来实现同样的目的，在用户停止输入指定的时间后或者在以高速率触发的事件中执行一个函数，比如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的事件对象和this形式的DOM元素)。
更新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)
}
}在set of tests中介绍了该实现。
有关更复杂的内容，请查看jQuery Typewatch插件。
Stack Overflow用户
发布于 2009-12-16 02:43:17
如果要在输入完成后进行搜索，请使用全局变量来保存从setTimout调用返回的超时，如果还没有发生，则使用clearTimeout取消超时，这样除了最后一个keyup事件外，它不会触发超时
var globalTimeout = null;
$('#id').keyup(function(){
if(globalTimeout != null) clearTimeout(globalTimeout);
globalTimeout =setTimeout(SearchFunc,200);
}
function SearchFunc(){
globalTimeout = null;
//ajax code
}或者使用匿名函数：
var globalTimeout = null;
$('#id').keyup(function() {
if (globalTimeout != null) {
clearTimeout(globalTimeout);
}
globalTimeout = setTimeout(function() {
globalTimeout = null;
//ajax code
}, 200);
} Stack Overflow用户
发布于 2013-10-09 06:27:34
这是对CMS答案的另一个小小的改进。要轻松实现单独的延迟，您可以使用以下方法：
function makeDelay(ms) {
var timer = 0;
return function(callback){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
};如果您想重用相同的延迟，只需这样做
var delay = makeDelay(250);
$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});如果您想要单独的延迟，可以这样做
$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});https://stackoverflow.com/questions/1909441
复制相似问题
腾讯云开发者
