js中防抖与节流

防抖

常见的有我们定义一个输入框的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秒执行定时器，输出防抖，此处可替换为调用接口等操作，原理很简单，通过闭包实现控制定时器只会存在一个，当用户一直在输入时，每次触发事件都会判断是否存在定时器，存在则清除该定时器，生成一个新的定时器，直到用户停止输入，此时也只有一个定时器，时间到了则执行定时器里的函数。

 

节流

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

//节流
    function throttle(time,fn){
      let timer = 0;
      return function(){
        const now = new Date();
        if(now-timer>=time){
          //执行
          fn();
          timer = now;
        }
      }
    }
    function fn(){
      setTimeout(()=>{console.log('节流')},500)
    }
    document.getElementById('body').addEventListener('mousemove',throttle(500,fn));
  </script>

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

此时还有一些不完善的地方就是，当我们没有超过500毫秒时，事件不会触发，所以我们需要设置最后停止也要执行一次，如下更改

   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>

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

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

 let timer = new Date();
 let t = null;
这两个变量只会执行一次赋值。