什么是防抖和节流？应用场景及区别

简要定义

防抖： 防止抖动，单位时间内事件触发定时器重置，避免事件被误伤触发多次。防抖可以比作等电梯，只要有一个人按按键进来，就需要再等一会儿。

---

节流： 控制流量，单位时间内事件只能触发一次。节流可以比作过红绿灯，每等一个红灯时间就可以过一批,重点在限制流量。

防抖、节流图解

• 防抖图解
  
• 节流图解：
  

应用场景

防抖：

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存；

节流 ：

* 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
* input键盘抬起搜索、模糊查询等；
* 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
* 浏览器播放事件，每个一秒计算一次进度信息等；

代码实现

//防抖
function debounce(func,time){
  let timer = null;
  return ()=>{
    timer && clearTimeout(timer);
    timer = setTimeout(()=>{
      func.apply(this,arguments)
    },time)
  }
}
//节流
function throtte(func,time){
  let activeTime = 0;
  return ()=>{
    const current = Date.now()
    if(current-activeTime>time){
      func.apply(this,arguments);
      activeTime = Date.now();
    }
  }
}

总结

防抖是指高频触发的事件，在制定的单位时间内，只响应最后一次，如果在指定时间内再次触发，则重新计算时间。节流是指高频触发的事件，在指定的单位时间内，只响应第一次