使用Input做关键词实时搜索功能是许多开发都会遇到的,然后实际很多情况下需要做延迟AJAX请求功能,网上也有很多可以使用延迟请求函数的插件如Underscore.js,但如果只为了这一个功能需求就引入一个插件未免太小题大作了,所以我们可以自食其力,自己动手写延迟函数。
正常代码:
<input type="search" class="keyword" placeholder="请输入关键词" />
$('.keyword').keyup(function(){
//获取关键词
var keyword=$(this).val();
//AJAX请求
$.get('server/search.php',{keyword:keyword},function(res){
console.log(res);
})
})
更改后的代码:
//保存定时器ID
var tid=null;
//延迟执行函数
function debounce(fn,wait){
//设定默认的延迟时间
wait=wait||500;
//清除定时器
tid && clearTimeout(tid);
//定时器执行
tid=setTimeout(fn,wait);
}
$('.keyword').keyup(function(){
//获取关键词
var keyword=$(this).val();
//AJAX请求
debounce(function(){
$.get('server/search.php',{keyword:keyword},function(res){
console.log(res);
})
},1000);
})
当然了,debounce函数也可以作为其它的延迟函数执行方法。