Skip to content

[javascript] throttle 與 debounce,處理頻繁的 callback 執行頻率

Published: at 03:25 PM (4 min read)

在 javascript 的程式碼執行,採的是非同步的 callback 函式。

因此時常會是一個 event 觸發 callback 執行,但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件)

這時候如果每次觸發都執行 callback 可能不是這麼必要,甚至導致程式碼執行效率不佳

我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。


程式碼的部分有點長,在這僅附上 underscore.js 的 opensource 連結,就不詳細解釋了:

debouncehttps://github.com/jashkenas/underscore/blob/master/underscore.js#L880,大體上就是每次觸發事件時會重置一個 callback 的 setTimeout 計時器(如:100 ms)。

throttlehttps://github.com/jashkenas/underscore/blob/master/underscore.js#L835,大體上就是利用 closure 把上次觸發 callback 的時間記下來,當呼叫 throttle 時超過設定的時間(如:100 ms)執行 callback。

參考資料:

http://www.cnblogs.com/jonkee/p/5124335.html

http://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/

https://css-tricks.com/the-difference-between-throttling-and-debouncing/