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