知识总结：函数防抖和函数节流

函数防抖：

从触发事件开始计时，指定时间段内无再触发事件则执行函数；

从触发事件开始计时，当指定时间段还未倒数结束又被触发，则倒计时重新计算；

举例：input 输入事件后获取内容，每次输入都会被执行，防抖可在输入停止一段时间后再执行方法

<div class="content">
  <!-- 防抖 -->
  <div class="debounce">
    <button class="btn">防抖</button>
  </div>
</div>

<script>
  // 防抖
  function debounce(fn) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
      // 每当用户输入的时候把前一个 setTimeout clear 掉
      clearTimeout(timeout); 
      timeout = setTimeout(() => {
        // 然后又创建一个新的 setTimeout, 
        //这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，
        //就不会执行 fn 函数
        fn.apply(this, arguments);
        //关键在第一个参数，为了确保上下文环境为当前的this，所以不能直接用fn。
      }, 500);
    };
  }
  document.getElementsByClassName('debounce')[0].onclick = debounce(() => {
    console.log('防抖呀！！！！！！！')
  })
</script>

函数节流：

在指定时间段内只执行一次；

从触发事件开始计时，指定时间段内重复触发不再执行，直接return；

<div class="content">
  <!-- 节流 -->
  <div class="throttle">
    <button class="btn">节流</button>
  </div>
</div>

<script>
  // 节流
  function throttle(fn) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
      if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
      canRun = false; // 立即设置为false
      setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
        fn.apply(this, arguments);
        //关键在第一个参数，为了确保上下文环境为当前的this，所以不能直接用fn。
        // 最后在setTimeout执行完毕后再把标记设置为true
        //(关键)表示可以执行下一次循环了。
        //当定时器没有执行的时候标记永远是false，在开头被return掉
        canRun = true;
      }, 2000);
    };
  }
  document.getElementsByClassName('throttle')[0].onclick = throttle(() => {
    console.log('节流呀！！！！！！！')
  })
</script>