节流
节流最初是指通过障碍物减缓流体流动速度。在编程上下文中,它指的是减缓某个过程的速度,以便操作只能以一定的速率执行。
节流与去抖动非常相似。关键区别在于,当连续调用发生时,节流确保操作仍以一定的最大速率执行,而去抖动则无限期地等待,直到调用停止一段时间。
去抖动的一个典型用例是在与另一个不断更新的状态同步时。考虑一个函数onScrolled
,它侦听scroll
事件。scroll
事件可能每滚动一个像素就触发一次,因此该函数将在非常短的时间间隔内被调用。如果onScrolled
计算量很大,较早的调用可能会阻止后续调用及时发生,或者阻止其他事情在此时执行,从而导致明显的卡顿。在这种情况下,我们可以对onScrolled
进行节流,以便它最多每10毫秒只能被调用一次。
- 对
onScrolled
的第一次调用称为前沿。 - 对于对
onScrolled
的每次后续调用,如果它在第一次调用后的10毫秒内,则它与第一次调用位于同一个“批次”。 - 从对
onScrolled
的第一次调用开始经过10毫秒后,我们就达到了后沿。
通常,onScrolled
仅在前沿执行一次,尽管有时它可能会在后沿执行,甚至在两个边缘都执行,具体取决于具体的用例。如果在两个边缘都执行,则节流实现通常还会确保下一个前沿调用至少在先前后沿的10毫秒后才触发。
通过节流,onScrolled
的效果仍然会持续更新和应用——例如,如果它根据文档的滚动位置移动另一个DOM元素,则该DOM元素在页面滚动时仍然会持续移动——但它不会比必要时更频繁地执行。
网络节流是指通过一次只允许传输一定量的数据来模拟较慢的网络连接。节流计时器是指使计时器的精度变粗,以便在连续读取计时器(例如Date.now()
)时,计时器的值仅以一定的最大速率变化。两者都是节流这一通用概念的具体应用。
另请参阅
- 术语表
- 通过示例解释去抖动和节流 on CSS-Tricks (2016年4月6日)