JS函数节流与函数防抖

首先，我们要知道：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。

一、它们的基本概念如下

1、函数节流：在指定时间内，不管事件被触发几次，只会执行一次。

2、函数防抖：一个事件开始执行还没有结束，在指定的时间又触发该事件，则重新开始计时；一直被触发则一直重新计时。

二、二者区别

函数防抖和函数节流都是防止某一段时间频繁触发，但是它们的原理不一样；函数节流是每间隔一段时间执行一次，函数防抖是在某一段时间内只执行一次。

三、简单例子

1、函数节流

    <script>
      let oInput = document.querySelector("input");
      // 设置锁的状态
      let lock = false;
      // 绑定oninput事件
      oInput.oninput = () => {
        // 判断所的状态；如果为true，则结束代码执行。
        if (lock) return;
        // 重新赋值所的状态
        lock = true;
        // 开启延时器
        setTimeout(function () {
          // 再次重新设置锁的状态
          lock = false;
          console.log(oInput.value);
        }, 2000);
      };
    </script>

2、函数防抖

    <script>
      let oInput = document.querySelector("input");
      let times = "";
      // 绑定oninput事件
      oInput.oninput = function () {
        // 判断如果有延时器的返回值，则清延时器。
        if (times) {
          clearTimeout(times);
        }
        // 锁定this指向
        let that = this;
        // 重新开启延时器
        times = setTimeout(function () {
          // 因为在延时器中this指向window，所以用到上面的锁定this指向。
          console.log(that.value);
        }, 500);
      };
    </script>