我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”，它会用AJAX搜索每个键:“W”，“Wi”，“Win”，“Wind”，“Windo”，“Window”，“Windows”。
我想有一个延迟，所以它只在用户停止输入200毫秒时搜索。
在keyup函数中没有这个选项，我尝试了setTimeout，但它不起作用。
我该怎么做呢?
当前回答
将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');
});
其他回答
解释
使用变量存储超时函数。然后使用clearTimeout()清除该变量的任何活动超时函数，然后使用setTimeout()再次设置活动超时函数。我们首先运行clearTimeout()，因为如果用户键入“hello”，我们希望函数在用户按下“o”键后不久运行(而不是每个字母一次)。
演示工作
超级简单的方法，设计用于在用户在文本字段中输入完成后运行一个函数…
$(document).ready(function(e) { var timeout; var delay = 2000; // 2 seconds $('.text-input').keyup(function(e) { $('#status').html("User started typing!"); if(timeout) { clearTimeout(timeout); } timeout = setTimeout(function() { myFunction(); }, delay); }); function myFunction() { $('#status').html("Executing function for user!"); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Status: <span id="status">Default Status</span><br> <textarea name="text-input" class="text-input"></textarea>
在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);
});
延迟函数调用每个按键。 jQuery 1.7.1或更高版本
jQuery.fn.keyupDelay = function( cb, delay ){
if(delay == null){
delay = 400;
}
var timer = 0;
return $(this).on('keyup',function(){
clearTimeout(timer);
timer = setTimeout( cb , delay );
});
}
用法:$ (' # searchBox”)。keyupDelay(cb);
这个函数扩展了一下Gaten答案中的函数，以便返回元素:
$.fn.delayKeyup = function(callback, ms){
var timer = 0;
var el = $(this);
$(this).keyup(function(){
clearTimeout (timer);
timer = setTimeout(function(){
callback(el)
}, ms);
});
return $(this);
};
$('#input').delayKeyup(function(el){
//alert(el.val());
// Here I need the input element (value for ajax call) for further process
},1000);
http://jsfiddle.net/Us9bu/2/
看一下autocomplete插件。我知道它允许您指定延迟或最小字符数。即使你最终没有使用这个插件，浏览代码也会给你一些关于如何自己实现它的想法。
