JS中的防抖节流

1.防抖

JS中的防抖就是在一定时间内，在第一次触发事件的时候，不立刻执行，而是等待一段时间后再执行，这里就要用到定时器来实现了，但是当再次触发事件的时候，定时器又会重新计时，直到在设定的时间内不再触发事件，然后执行事件函数。
代码实现过程如下所示：

 var input = document.querySelector("input"); //获取input输入框
      function antiShake(fn, delay) {
        //delay为需要设定的时间，fn传入函数
        let bool; //定义bool
        return function () {l
          //返回一个函数
          if (bool) clearTimeout(bool); //刚开始触发的时候bool为undefined不执行if语句内容，
          //第二次触发事件bool为true，清除定时器,以此类推，让其始终存在一个定时器
          bool = setTimeout(fn, delay); //给bool赋值为一个定时器，
          //每次触发事件都会重新设置一个新的定时器
        };
      }
      function fn() {
        //定义回调函数
        console.log(1111);
      }
      input.addEventListener("input", antiShake(fn, 3000)); //设置input输入框的时间监听，设置时间和回调函数fn

分析下上面的代码：首先给input输入框设置一个input的监听事件，当input键入的时候就会执行antiShake函数。antiShake函数中，首先定义了个bool变量，然后返回了一个函数，在这个函数中首先判断bool值为true还是false，如果为true清除定时器bool，反之直接执行下面语句，令bool等于一个定时器。这些都是为了让程序始终保持有且只有一个定时器存在，每当有input事件触发的时候，都会清除原来的定时器，再创建一个新的定时器，直到不触发input事件的时候，等待设置的时间后，就会执行fn函数里面的语句。

2.节流

JS中节流就是设置一个时间，在这个时间内无论你触发多少次事件，只会有一个定时器，等待后只执行一次。
代码实现过程如下所示：

var input = document.querySelector("input");
      var bool; //获取input输入框
      function throttle() {
        if (bool) return; //如果bool为true 直接跳出函数
        var time = setTimeout(function () {
          //定义定时器，并设置时间
          console.log(1);
          clearTimeout(time); //清除定时器
          bool = false;
        }, 3000);
        bool = true;
      }
input.addEventListener("input", throttle); //给input输入框设置input事件监听

分析下上面代码：当触发input事件的时候，执行throttle函数，先判断bool的值，第一次触发的时候bool为undefined不执行if语句的内容，往下执行，定义一个定时器，令bool为true，定时器开始计时，当input事件再次触发的时候进入，bool为true，执行if语句里面内容，直接跳出函数不再执行下面语句，直到定时器计时完毕执行定时器函数里面的内容，bool重新变为false才能重新设置一个定时器。所以第一次触发后，在这个定时器完成前无论触发多少次事件都不会生成新的定时器，当然实现节流的方式有很多种，我只举了其中的一种。

3.总结

简而言之，防抖就是设置一个时间，首次触发事件后不会立即执行，在这个时间内再次触发事件则重新计算时间，直到不再触发事件后，再等待一会才会执行。节流也是触发事件后不会立刻执行，但在这个时间无论触发多少次事件都不会再生成新的定时器，直到倒计时结束，执行定时器里面的内容后，再次触发事件才会生成一个新的定时器。在不同的应用场景可以自己选择使用，正确使用节流和防抖能更好的优化网站的性能。