【记录问题】防抖与节流

在公司业务代码中，经常要用模糊搜索，就是，在input框输入信息时，通过ajax请求获取信息，并选择相应的结果（例如：房源搜索）
但是，如果用普通的写法，每次在input数值改变的时候就请求数据，本身数据量就很大，请求次数又太多，会造成请求阻塞，有的请求可能很慢，覆盖了之前的请求结果，导致搜索的数值和请求结果对不上。所以要采用防抖的方式
1、防抖
函数防抖（debounce）:在持续操作过程中，一定时间内没有再次触发，才会进行事件处理函数，如果未到指定时间，会清除之前的定时器，重新开始计时
运用场景：页面scroll，resize，输入框的验证请求

//获取按钮，绑定事件
var dom=document.getElementById('#input');
dom.addEventListener('input',debounce(handle)
//防抖功能函数，进行传参
function debounce(fn){
    //定义一个值存放定时器的返回值
    let timeout=null;
    return function(){
    //每次用户点击之前，把前一个定时器清除
        if(timeout!==null){
            clearTimeout(timeout)
        }
        timeout=setTimout(()=>{
            //用户点击，执行函数
            fn.apply(this,arguments)
        },1000)
    }
}
//防抖事件处理
function handle(){
    console.log('防抖成功'); 
}

还有种写法，及上面的那张图，一开始用function嵌套，就没有效果

//错误写法
btn.addEventListener('input',function(){
    //我的想法：这样写，因为返回的是函数，后面的函数没有执行
    debounce(sayhi)
})

参考文章：
1、mp.weixin.qq.com/s/Vkshf-nED…
2、juejin.cn/post/684490…
3、github.com/Advanced-Fr…
4、juejin.cn/post/684490…