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

在 javascript 的程式碼執行,採的是非同步的 callback 函式。 因此時常會是一個 event 觸發 callback 執行,但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件) 這時候如果每次觸發都執行 callback 可能不是這麼必要,甚至導致程式碼執行效率不佳 我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。 debounce: 把短間隔時間(自行設定微秒)內重複觸發的事件合併為一個(自行設定觸發時間點),只呼叫一次 callback。 像是當瀏覽器 resize 時,會頻繁觸發 resize 事件,使用 debounce 就可以達到視窗最後改變時再觸發 callback。 下面例子,試著把滑鼠頻繁的在 Trigger area 中移動,可以看到 debounce 函數的實際效果。 See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen. 上面這個例子,可以看到當你在 Trigger area 頻繁移動滑鼠(400微秒內)時,僅會觸發一次的 […]

Continue reading