⚖️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) 的目的❗️

🗺️ throttle

timeline/states of a throttled function

throttle: timer view

📗 參考

• JS.info ⟩ Decorators and forwarding, call/apply ⭐️