防抖和节流

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、onScroll等等。
为了说明问题，假设一个场景：鼠标滑过一个div，触发onmousemove事件，它内部的文字会显示当前鼠标的坐标。

    #box {
      width: 1000px;
      height: 500px;
      background: #ccc;
      font-size: 40px;
      text-align: center;
      line-height: 500px;
    }
</style>

<div id="box"></div>

<script>
  const box = document.getElementById('box')
  box.onmousemove = function (e) {
    box.innerHTML = `${e.clientX}, ${e.clientY}`
  }
</script>

防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行

封装一个函数，让持续触发的事件监听是我们封装的这个函数，将目标函数作为回调（func）传进去，等待一段时间过后执行目标函数

  return function() {
    setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

第二点实现了，再看第一点：持续触发不执行。我们先思考一下，是什么让我们的函数执行了呢？是上边的setTimeout。OK，那现在的问题就变成了持续触发，不能有setTimeout。这样直接在事件持续触发的时候，清掉定时器就好了。

  let timeout
  return function() {
    clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

用法

    box.innerHTML = `${e.clientX}, ${e.clientY}`
  }, 1000)

节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。

思考一下，持续触发，并不会执行，但是到时间了就会执行。抓取一个关键的点：就是执行的时机。要做到控制执行的时机，我们可以通过一个开关，与定时器setTimeout结合完成。

函数执行的前提条件是开关打开，持续触发时，持续关闭开关，等到setTimeout到时间了，再把开关打开，函数就会执行了。

实现代码

    let run = true
    return function () {
      if (!run) {
        return  // 如果开关关闭了，那就直接不执行下边的代码
      }
      run = false // 持续触发的话，run一直是false，就会停在上边的判断那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定时器到时间之后，会把开关打开，我们的函数就会被执行
      }, delay)
    }
  }

调用

  box.innerHTML = `${e.clientX}, ${e.clientY}`
}, 1000)

这样，就实现了节流，节流还可以用时间间隔去控制，就是记录上一次函数的执行时间，与当前时间作比较，如果当前时间与上次执行时间的时间差大于一个值，就执行。