淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異[轉]

標籤：滑鼠移動   記錄   自動   throttle   動態   自動完成   定位   odi   between   

看的文章來自： https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs

使用情境

只要牽涉到連續事件或頻率控制相關的應用都可以考慮到這兩個函數，比如：

• 遊戲射擊，keydown 事件
• 文本輸入、自動完成，keyup 事件
• 滑鼠移動，mousemove 事件
• DOM 元素動態定位，window 對象的 resize 和 scroll 事件

 

文章裡有個比喻很形象

• throttle 策略的電梯。保證如果電梯第一個人進來後，15秒後準時運送一次，不等待。如果沒有人，則待機。
• debounce 策略的電梯。如果電梯裡有人進來，等待15秒。如果又人進來，15秒等待重新計時，直到15秒逾時，開始運送。

 

評論裡也很精彩：

throttle:觸發-上次動作執行時間〉大於限制時間->執行動作，記錄執行時間
debounce:觸發-記錄觸發時間-上次動作觸發時間〉大於限制時間-執行動作

-----------

能看明白了吧。

throttle  ： 定時定點

debounce ： 作延遲處理

 

淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異[轉]