防抖和节流的概念及实现方法

引言

  在用户高频率触发事件时，会使得浏览器的负担加重，可能会导致用户体验非常糟糕。这时就可以使用防抖和节流来减少事件处理函数被调用的频率。

防抖

  概念：一定时间内，频繁触发事件，事件处理函数只执行最后一次。
  实现方式：定义一个全局变量存储setTimeOut的值，每调用一次事件处理函数，都先清除掉上一次设置的延时器，然后设置本次事件处理函数的setTimeOut，这样可以实现延时器规定的时间内只触发一次事件处理函数原本应该执行的功能代码。
具体实现代码：

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // 定义一个全局变量存储setTimeOut的值
    let timerId = null
    input.addEventListener('input', function () {
      // 每次触发事件都清除掉上一次设置的延时器
      clearTimeout(timerId)
      // 设置延时器，把需要执行的功能代码放在延时器中
      timerId = setTimeout(function () {
        console.log(input.value)
      }, 200)
    })
  </script>

  程序运行结果:

  从程序运行结果可以看出，在表单文本框中输入一样的内容，设置了防抖后，大幅度减少了事件处理函数被调用的次数，减轻了浏览器的负担，而且对最后的运行结果也没有影响。

节流

  概念：一定时间内，频繁触发事件，事件处理函数只执行一次。
  实现方式：声明一个全局变量记录事件的触发时间，每一次触发事件调用事件处理函数都获取当前时间，比较当前时间和上一次触发事件的时间间隔，如果大于节流的时间，就执行功能代码，然后把当前时间赋值给全局定义的变量，当做下一次触发事件时比较的对象。
具体实现代码：

  <style>
    html {
      height: 2000px;
    }
  </style>
  <script>
    let lastTime = 0
    window.addEventListener('scroll', function () {
      // 获取当前时间
      const now = Date.now()
      // 判断当前时间-上一次触发时间
      if (now - lastTime >= 300) {
        console.log(1)
        // 记录上一次触发时间的时间
        lastTime = now
      }
    })
  </script>

  程序运行结果:

  从程序运行结果可以看出，滚动条滚动同样的距离，设置了节流后，事件处理函数被调用的次数从206次减少到了7次，极大的减轻了浏览器的负担，而且对最后的运行结果也没有影响。