41-函数节流

发表于 | 分类于 |

link,link

debounce(func, wait, immediate)：

创建并返回函数的防反跳版本，将延迟函数的执行（真正的执行）在函数最后一次调用时刻的 wait 毫秒之后，对于必须在一些输入（多是一些用户操作）停止之后再执行的行为有帮助。将一个连续的调用归为一个！

throttle(func, wait, options)：

创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔指定的 wait 毫秒调用一次该函数； 不允许方法在每 wait ms 间执行超过一次！

举个例子：页面存在一个按钮，通过 throttle 和 debounce 包括其监听函数，wait 设置为 1000ms。确保在每个 1000ms 内都多次触发 click 持续 2000ms。

1
2
3
4
// 执行1次(最后一次点击1000ms后)
btnDom.addEventListener('click', debounce(clickBtn, 1000));
// 执行3次(点击立即执行一次、1000ms后执行一次，2000ms后执行一次)
btnDom.addEventListener('click', throttle(clickBtn, 1000));

debounce 使用场景：

第一次触发后，进行倒计 wait 毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行 fn。用它来丢弃一些重复的密集操作、活动，直到流量减慢。例如：

  • 对用户输入的验证，不在输入过程中就处理，停止输入后进行验证足以；
  • 提交 ajax 时，不希望 1s 中内大量的请求被重复发送。

throttle 使用场景

第一次触发后先执行 fn（当然可以通过{leading: false}来取消），然后 wait ms 后再次执行，在单位 wait 毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发，每 wait ms 执行 fn 一次。与 debounce 相同的用例，但是你想保证在一定间隔必须执行的回调函数。例如：

  • 对用户输入的验证，不想停止输入再进行验证，而是每 n 秒进行验证；
  • 对于鼠标滚动、window.resize 进行节流控制。

正真的业务场景：

一个相当常见的例子，用户在你无限滚动的页面上向下滚动鼠标加载页面，你需要判断现在距离页面底部多少。如果用户快接近底部时，我们应该发送请求来加载更多内容到页面。在此 debounce 没有用，因为它只会在用户停止滚动时触发，但我们需要用户快到达底部时去请求。通过 throttle 我们可以不间断的监测距离底部多远。