我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”,它会用AJAX搜索每个键:“W”,“Wi”,“Win”,“Wind”,“Windo”,“Window”,“Windows”。
我想有一个延迟,所以它只在用户停止输入200毫秒时搜索。
在keyup函数中没有这个选项,我尝试了setTimeout,但它不起作用。
我该怎么做呢?
我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”,它会用AJAX搜索每个键:“W”,“Wi”,“Win”,“Wind”,“Windo”,“Window”,“Windows”。
我想有一个延迟,所以它只在用户停止输入200毫秒时搜索。
在keyup函数中没有这个选项,我尝试了setTimeout,但它不起作用。
我该怎么做呢?
当前回答
你也可以看看underscore.js,它提供了像debounce这样的实用方法:
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
其他回答
延迟函数调用每个按键。 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);
根据CMS的回答,我做出了这样的决定:
把下面的代码包括jQuery后:
/*
* delayKeyup
* http://code.azerti.net/javascript/jquery/delaykeyup.htm
* Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
* Written by Gaten
* Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
*/
(function ($) {
$.fn.delayKeyup = function(callback, ms){
var timer = 0;
$(this).keyup(function(){
clearTimeout (timer);
timer = setTimeout(callback, ms);
});
return $(this);
};
})(jQuery);
简单地像这样使用:
$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
注意:作为参数传递的函数中的$(this)变量与输入不匹配
使用jQuery插件bindWithDelay:
element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
如果有人喜欢延迟相同的函数,并且没有外部变量,他可以使用下一个脚本:
function MyFunction() {
//Delaying the function execute
if (this.timer) {
window.clearTimeout(this.timer);
}
this.timer = window.setTimeout(function() {
//Execute the function code here...
}, 500);
}
使用标签延迟多函数调用
这是我的解决方案。它会延迟你想要的任何函数的执行。它可以是按下键搜索查询,也可以是快速单击上一个或下一个按钮(否则如果连续快速单击将发送多个请求,并且最终不会使用)。它使用一个全局对象存储每次执行时间,并将其与最新的请求进行比较。
因此,结果是只有最后一个点击/动作将被实际调用,因为这些请求存储在队列中,如果队列中没有其他具有相同标签的请求,则在X毫秒后调用!
function delay_method(label,callback,time){
if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}
delayed_methods[label]=Date.now();
var t=delayed_methods[label];
setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{ delayed_methods[label]=""; callback();}}, time||500);
}
您可以设置自己的延迟时间(可选,默认为500ms)。并以“闭包方式”发送函数参数。
例如,如果你想调用下面的函数:
function send_ajax(id){console.log(id);}
为了防止多个send_ajax请求,可以使用以下方法延迟它们:
Delay_method ("check date", function(){send_ajax(2);}, 600);
每个使用标签“check date”的请求只有在600毫秒的时间范围内没有其他请求时才会被触发。这个参数是可选的
标签独立性(调用相同的目标函数),但同时运行:
delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});
导致调用相同的函数,但由于它们的标签不同而单独延迟它们