⚖️debounce vs. throttle

JS ⟩ technique ⟩ decorator ⟩ debounce vs. throttle

  • debounce(f, s) ： (you have to pause long enough) to run it once at the end of the “cooldown” period. (good for processing the final input)

  • throttle(f, s)： runs it at the start of the “cooldown” period, further calls during the "cooldown" period are all ignored except the last. (good for regular updates that shouldn’t be very often)

debounce(f, s)

相對來說比較單純，沒什麼冷不冷卻的問題，它被呼叫時只做一件事，就是：

  • 取消「舊鬧種」（如果有的話）

  • 並「設定新鬧鐘」（時間到，即執行該呼叫）

換句話說，不管呼叫多少次，只有「最後一次有撐過鬧鐘等待時間」的呼叫，才會真正觸發鬧鐘，真正執行。也就是要有「一段時間以上的停頓」(s 秒)，動作才會執行❗️

呼叫 throttle(f, s) ​時，

  • 如果沒有在「冷卻模式」內：

    • ① 立即進入「冷卻模式」("cooldown" mode)

    • ② 將呼叫傳給 f 執行 (forward call to f)。

    • ③ 同時「設定鬧鐘」，等「冷卻模式」一結束就：

      • ⑤ 切回「待機模式」("idle" mode)

      • ⑥ 檢查有無「保存的呼叫」(saved call)

        • 狀況一：如果有，就：

          • ⑦ 送出「保存的呼叫」(send saved call) ( 進入「冷卻時期」、執行 f、「設定鬧鐘」) (⭐️ 注意：是送給 "wrapper"，不是 f❗️)

          • ⑧ 清除「保存的呼叫」(clear saved call)

        • 狀況二：沒有，則不做任何事。

  • 若在「冷卻模式」內收到新的呼叫：

    • ④ 新的呼叫會被「保存」起來，但不執行。 (只有「最後一個」呼叫會被保存)

換句話說：

  • 雖然呼叫會被執行，但「接續太快的呼叫」會被忽略，在「每 s 秒內最多只會執行一次」，從而達到「節流」 (throttle) 的目的❗️

Previousthrottle(f, s)Nextmemoization

Last updated

Was this helpful?