节流防抖详解，附代码

节流就是「技能冷却中」

const throttle2 = (fn, time) =>{
  let timer = null

  return (...args)=>{
    if(timer){
      return
    }
    fn(...args)

    timer = setTimeout(()=>{
      timer = null
    }, time)
  }
}
const xx = throttle(闪现, 10 * 1000)

节流和防抖类似，只不过节流不是只有最后输出，而是每过一段时间执行一次，例如鼠标滚轮事件，每当鼠标向下滚动时我们需要加载数据，但是如果不加以控制你会发现只是向下滚动了一小下，结果可能却执行了几十此事件，此时我们需要加以节制，例如我们想控制每半秒钟请求一次数据，此时防抖就不适用了，因此我们需要使用节流来控制，如下

function throttle(time,fn,lastExe){
　　　　//此处定义的两个变量只会在第一次调用throttle方法时生效，之后都是执行闭包返回的函数
      let timer = new Date();
      let t = null;
      return function(){
        const now = new Date();
        if(lastExe){
          if(now-timer>=time){
            //时间到了执行
            fn();
            timer = now;
　　　　　　　//此时鼠标还在滑动，若有定时器则清除
            t&&clearTimeout(t);
          }else{
　　　　　　　//此时没有达到时间条件，做定时器清除和添加操作，保证鼠标停止时，只有一个定时器
            t&&clearTimeout(t);
            t = setTimeout(()=>{console.log('节流最后一次输出')},500);
          }
        }
      }
    }
    function fn(){
      console.log('节流')
    }
    document.getElementById('body').addEventListener('mousemove',throttle(500,fn,true));
  </script>

此时我们定义了一个鼠标移动事件，在该div上移动，每移动500毫秒，执行一次fn函数，原理和防抖类似，知识添加了一个时间的控制，每当时间达到了我们设置的时间，就执行一次fn函数。

添加第三个参数标记最后需要输出一次，在原有基础上添加了一个定时器，注释有说明，通过定时器记录当用户停止滑动时，有一个定时器会执行，即最后一次一定执行一次。

注意了解闭包原理，初始时

let timer = new Date(); let t = null;

这两个变量只会执行一次赋值。

防抖就是「回城被打断」

const debounce = (fn, time) => {
  let 回城计时器 = null
  return (...args) => {
    if (回城计时器 !== null) {
      clearTimeout(回城计时器) // 打断回城
    }
    // 重新回城
    回城计时器 = setTimeout(() => {
      fn.call(undefined, ...args) // 回城后调用 fn
      回城计时器 = null
    }, time)
  }
}

防抖常见的有我们定义一个输入框的keyUp事件，每次键盘输入都会调用该事件，此时，如果我们在该事件中请求接口数据，则会造成输入搜索关键字结果发出来n次请求，造成了资源的大大浪费，如果请求数据量大，还会造成卡顿现象，此时加入防抖是一个很好的解决办法。

<input type="text" id="text"/>

  <script>
    function debounce(time){
      let timer;
      return function(){
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(()=>{console.log('防抖')},time)
      }
    }
   document.getElementById('text').addEventListener('keyup',debounce(1000))；
</script>

效果为每次输入结束后1秒执行定时器，输出防抖，此处可替换为调用接口等操作，原理很简单，通过闭包实现控制定时器只会存在一个，当用户一直在输入时，每次触发事件都会判断是否存在定时器，存在则清除该定时器，生成一个新的定时器，直到用户停止输入，此时也只有一个定时器，时间到了则执行定时器里的函数