js防抖和节流

防抖：

事件触发后，间隔时间内如果再次触发事件，则重新计算执行时间再触发事件。也就是说n秒时间内只执行一次事件，连续多次的触发，只会执行最后一次。

用到的场景：

• 表单的提交
• 一些数据的提交按钮
• input输入框搜索事件
• 浏览器窗口resize事件，窗口调整完成计算尺寸，避免重复渲染

  function debounce(func, time) {
    let timer = null;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(()=> {
        func.apply(this, arguments)
      }, time);
    }
  }

节流：

事件连续频繁的触发，则在一定的间隔时间内触发事件，高频事件n秒内只执行一次，稀释事件的执行频率。

使用场景：

• 滚动条滚动事件onscorll
• 鼠标移动
• keyup、keydown
• DOM拖拽

  function throtte(func, time){
    let activeTime = 0;
    return () => {
      const current = Date.now();
      if(current - activeTime > time) {
        func.apply(this, arguments);
        activeTime = Date.now();
      }
    }
  }

区别：

针对连续触发的行为，防抖是在间隔时间内只执行最后一次触发，侧重于一定时间内只会执行一次；节流则是在每个间隔时间内只执行一次，降低高频事件触发的频率；二者的判断重点在于一个是只执行一次，一个是降低执行次数。