我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“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');
});
其他回答
Use
mytimeout = setTimeout( expression, timeout );
其中expression是要运行的脚本，timeout是在它运行之前等待的时间(以毫秒为单位)——这不会暂停脚本，而是简单地延迟该部分的执行，直到超时完成。
clearTimeout(mytimeout);
将重置/清除超时，这样它就不会在表达式中运行脚本(就像取消)，只要它还没有被执行。
var globalTimeout = null;
$('#search').keyup(function(){
if(globalTimeout != null) clearTimeout(globalTimeout);
globalTimeout =setTimeout(SearchFunc,200);
});
function SearchFunc(){
globalTimeout = null;
console.log('Search: '+$('#search').val());
//ajax code
};
在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);
};
})();
好吧，我也做了一段代码限制高频ajax请求由Keyup / Keydown。看看这个:
https://github.com/raincious/jQueue
像这样提问:
var q = new jQueue(function(type, name, callback) {
return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.
并像这样绑定事件:
$('#field-username').keyup(function() {
q.run('Username', this.val(), function() { /* calling back */ });
});
延迟函数调用每个按键。 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);
