JS中的防抖与节流

防抖：

在用户触发事件的时候，开启一个定时器，只要用户再次触发，清除定时器，再重新开始计时

简单总结：固定的时间内，事件只允许发生一次

应用场景：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

缺点：不够人性化，过于生硬

function debounce(fn,t) {
    var timer=null;
     function inner() {
      clearTimeout(timer);
      timer=setTimeout(fn,t)
    }
    return inner;
}

节流：

简单总结：在一段时间内，只允许触发一次

应用场景===>1.提交表单  2.高频监听事件

function throttle(fn,t){
     var timer=null;
    function inner(){
    //判断当前事件是否可以被触发
    if(!timer){
    //直接触发事件
        fn()
    timer=setTimeout(function(){
    clearTimeout(timer)
    timer=null
    },t)
            }
     }
}
return inner;
}