在前端开发中,有两个常用的高阶函数:debounce 与 throttle。它们经常用来防止函数被高频调用。
本文详细说明了 Lodash 中 debounce 和 throttle 的使用方法。
debounce(去抖)
bounce可以翻译为弹跳、跳跃。
我们可以对应几个场景来进一步理解 bounce:
- 有一根弹簧,一端固定好,另一端拉伸后松开,弹簧就会在一定时间内不停地 bounce。
- 在街舞的教学中,有的老师会和学生强调 “bounce” 的练习。可以粗略的理解为:身体跟着音乐要不停地律动。
- 在我们使用鼠标时,有时候会连续点击鼠标。
概括来说,bounce 可以广义理解为:在一定时间内连续做某件事。
了解了bounce,debounce 要做什么事情就变得非常清晰:阻止在一定时间内连续做某件事。
Lodash 中的 debounce 方法使我们可以将连续多次的函数调用归为一次调用。
函数原型及参数详解
1 | /** |
示例
1 | // 避免窗口在变动时出现昂贵的计算开销 |
throttle(节流阀)
从字面意思上看可以理解为事件在一个管道中传输,加上这个节流阀以后,事件的流速就会减慢。
throttle 的实际作用也是如此:限制一个函数在一定时间内只能执行一次。
函数原型及参数详解
1 | /** |
示例
1 | // 避免在滚动时过分的更新定位 |
debounce 和 throttle 区别
在 Lodash 中,throttle 方法是基于 debounce 实现的。
主要区别是 throttle 保证方法每 wait 秒内有规律的执行。
一个相当常见的例子,用户在你无限滚动的页面上向下拖动,你需要判断现在距离页面底部多少。
如果用户快接近底部时,我们应该发送请求来加载更多内容到页面。
这种情况下, debounce 是没有用的,因为它只会在用户停止滚动时触发,但我们需要用户快到达底部时去请求。
通过 throttle 我们可以不间断的监测距离底部多远。