Published on

节流防抖

Authors

什么是节流/防抖？防抖是延迟执行最后一次，节流是固定频率执行

  1. 防抖：当用户在某一个时间段内，连续触发时，只在最后实际执行一次。比如我给表单的提交按钮，加了 1s 防抖，则用户如果在 1s 内点了 10 次，我也只在最后触发一次回调事件
  2. 节流：当用户在某一个时间段内，连续触发时，限定它的触发频率。比如我给 scroll 监听事件加了 1s 节流，则用户在页面滚动过程中，不管他滚动的多快（scroll 触发的有多频繁），我们也是 1s 响应一次，触发回调事件

如何实现？ 防抖/节流：

  1. Lodash
  2. 防抖用clearTimeout重置计时、节流用时间戳或定时器控制频率
// 防抖，只在最后一次执行
const debounce = (fn, delay) => {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 节流，在一段时间内，只执行一次
const throttle = (fn, delay) => {
  let timer = null
  return function (...args) {
    if (timer) {
      // 有定时器了
      return
    } else {
      // 还没定时器
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }
}

有啥用？

  1. 防抖处理的是用户频繁触发，但实际只需要触发一次的场景（比如表单提交按钮，输入验证/搜索）
  2. 节流处理的是用户频繁触发，但实际只需要以规定频率触发的场景（比如监听 scroll 滚动事件，射击游戏的连发限制）

最佳实践？

  1. 防抖延迟设300-500ms（输入场景），节流间隔设16ms（动画）或100ms（滚动）
  2. 凡是用户可能频繁触发，但实际只需要触发一次的地方，都要加防抖处理
  3. 防抖还可以配合后端接口一起处理，接口发送前，前端生成一个哈希值，作为参数传递给后端，当这个接口处理完毕后，再生成一个新的哈希值，替换之前的哈希值。如果服务端收到两个相同的哈希值，说明用户触发了重复请求，可以直接拒绝第二次请求，给出前端友好的提示信息。
  4. 用Lodash库快速实现（如_.debounce(searchFunc, 500)），避免重复造轮子
View on GitHub