- 在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求,这时就需要做一个延时请求的处理。
//定时器ID
var tid = null;
//延迟执行函数
function debounce(fn, wait) {
//设定默认的延迟时间
wait = wait || 500;
//清除定时器
tid && clearTimeout(tid);
//定时器执行
tid = setTimeout(fn, wait);
}
//搜索框监听
$("#search").bind("input propertychange", function (event) {
if ("" != $("#search").val()) {
debounce(function () {
search($("#search").val());
}, 500);
}
});
//ajax请求
function search(val){
$.ajax({})
}
上述代码中,在监听到输入框有变化时,都会先触发debounce延时函数,延时函数实现原理:1,如果存在未执行的函数(延时时间内输入信息发生变化),则清除旧定时器,重新创建新的定时任务;2,如果不存在未执行的函数(第一次进入延时函数或者延时时间已过旧定时任务已完成),则创建新的定时任务。这样就能做到在延时时间内最多一次请求。