節流
節流(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日)