在做实时搜索时，给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，如果不存在未执行的函数（第一次进入延时函数或者延时时间已过旧定时任务已完成），则创建新的定时任务。这样就能做到在延时时间内最多一次请求。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4246