节流与防抖

[YBFACC]

节流与防抖

节流：一段时间内，只能触发一次函数。

防抖：某段时间内，不管函数触发多少次，我只生效最后一次。（触发函数时，时间重置）

测试

不使用节流防抖

在我们滚动页面时，大量触发滚动事件。

节流

以下代码修改来自前端性能优化原理与实践。

<script>
  // fn是我们需要包装的事件回调, interval是时间间隔的阈值
  function throttle(fn, interval) {
    // last为上一次触发回调的时间
    let last = 0
    // 将throttle处理结果当作函数返回
    return function (args) {
      // 保留调用时的this上下文
      let context = this
      // 记录本次触发回调的时间
      let now = +new Date()
      // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
      if (now - last >= interval) {
        // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
        last = now;
        fn.apply(context, args);
      }
    }
  }

  // 用throttle来包装scroll的回调
  const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)

  document.addEventListener('scroll', better_scroll)
</script>

通过闭包来记录上一次执行的时间。如果2次触发的时间间隔小于你的设定值，则不触发。

可以看到使用了节流，触发函数的次数明显减少。

防抖

以下代码来自7分钟理解JS的节流、防抖及使用场景

<script>
  //模拟一段ajax请求
  function ajax(content) {
    console.log('ajax request ' + content)
  }

  function debounce(fun, delay) {
    return function (args) {
      let that = this
      clearTimeout(fun.id)
      fun.id = setTimeout(function () {
        fun.call(that, args)
      }, delay)
    }
  }

  let inputb = document.getElementById('debounce')

  let debounceAjax = debounce(ajax, 500)

  inputb.addEventListener('keyup', function (e) {
    debounceAjax(e.target.value)
  })

</script>

可以看到，当我停下输入一段时间后才执行函数。

节流结合图片懒加载

参考

7分钟理解JS的节流、防抖及使用场景

掘金小册前端性能优化原理与实践