几行代码实现AJAX延迟请求

使用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函数也可以作为其它的延迟函数执行方法。