函数的防抖和节流

一. 前言

函数的防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize，scroll，鼠标的mousemove,input的keypress等事件在触发时，会不断的调用绑定到事件上的回调函数，这样极大的浪费了前端资源，降低性能，为了优化体验，需要对这类现象进行调用次数的限制。

二. 常用使用场景

函数防抖的使用场景：高频连续的事件，只需要触发一次回调的场景

• input搜索输入框查询输入，只需要用户最后一次输入完后再发送请求
• 手机号，邮箱输入有效性校验
• 窗口resize，只需在窗口调整完成后，计算窗口大小，防止重复渲染

函数节流的使用场景：间隔一段时间再执行一次回调

• 滚动加载更多或触底加载更多
• 高频点击提交，表单重复提交

三. 具体实现

假设一个场景，鼠标滑过元素div，触发onmousemove事件，显示当下鼠标坐标。初始代码如下：

<style>
    #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>

防抖

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

事件被触发N秒后再执行回调，如果在N秒内一直被触发，则会一直被重新开始计时。

分解需求：

• 持续触发不执行
• 触发后N秒后再执行

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

  box.onmousemove = debounce(function (e) {
    box.innerHTML = `${e.clientX}, ${e.clientY}`
  }, 1000)

---

节流

每隔一段时间只会执行一次回调，而不是毫无节制的触发一下就执行一次。

分解需求：

• 持续触发不会触发一次就执行一次
• 到一定时间才去执行

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

box.onmousemove = throttle(function (e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`
}, 1000)

四. 参考链接

https://segmentfault.com/a/1190000019715721#articleHeader1
https://segmentfault.com/a/1190000018445196#articleHeader4
https://juejin.im/post/5caf39d8f265da03826106b8