我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”，它会用AJAX搜索每个键:“W”，“Wi”，“Win”，“Wind”，“Windo”，“Window”，“Windows”。
我想有一个延迟，所以它只在用户停止输入200毫秒时搜索。
在keyup函数中没有这个选项，我尝试了setTimeout，但它不起作用。
我该怎么做呢?
当前回答
这个函数扩展了一下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/
其他回答
你也可以看看underscore.js，它提供了像debounce这样的实用方法:
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
我很惊讶，没有人提到多重输入的问题在CMS的非常好的剪辑。
基本上，你必须为每个输入分别定义延迟变量。否则，如果有人把文本放在第一个输入，并迅速跳转到其他输入并开始输入，第一个的回调将不会被调用!
下面是我根据其他答案编写的代码:
(function($) {
/**
* KeyUp with delay event setup
*
* @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
* @param function callback
* @param int ms
*/
$.fn.delayKeyup = function(callback, ms){
$(this).keyup(function( event ){
var srcEl = event.currentTarget;
if( srcEl.delayTimer )
clearTimeout (srcEl.delayTimer );
srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
});
return $(this);
};
})(jQuery);
该解决方案将setTimeout引用保留在输入的delayTimer变量中。它还像fazzyx建议的那样将元素的引用传递给回调。
在IE6, 8(comp - 7)， 8和Opera 12.11中测试。
在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);
};
})();
基于CMS的答案，它只是忽略了不改变值的关键事件。
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
var duplicateFilter=(function(){
var lastContent;
return function(content,callback){
content=$.trim(content);
if(content!=lastContent){
callback(content);
}
lastContent=content;
};
})();
$("#some-input").on("keyup",function(ev){
var self=this;
delay(function(){
duplicateFilter($(self).val(),function(c){
//do sth...
console.log(c);
});
}, 1000 );
})
如果有人喜欢延迟相同的函数，并且没有外部变量，他可以使用下一个脚本:
function MyFunction() {
//Delaying the function execute
if (this.timer) {
window.clearTimeout(this.timer);
}
this.timer = window.setTimeout(function() {
//Execute the function code here...
}, 500);
}
