# throttle vs debounce 差異？ 在網頁開發中，常常會使用到 throttle 和 debounce 這兩個函數，用於限制某些事件觸發的頻率，以達到更好的性能優化和體驗。兩者的作用相似，以下將會介紹 throttle 和 debounce 的差異以及使用情境。 ## 前置知識 在介紹 throttle 和 debounce 之前，需要了解幾個概念： ==事件==：通常指某個 DOM 元素觸發的事件，例如點擊、滾動、輸入等等。 ==觸發頻率==：指某個事件在單位時間內觸發的次數，通常用「次/秒」或「次/分鐘」等單位表示。 ==函數節流==：在一段時間內，限制某個函數的觸發頻率，以避免過於頻繁的觸發導致性能問題。 ==函數去抖==：指在某個時間內，如果函數被多次觸發，只執行最後一次觸發的函數，以避免過多的計算和操作。 # throttle throttle 是一個函數，用於限制某個事件觸發時的頻率。它的實現方式是在一段時間內只執行一次事件處理函數，忽略其餘的事件。例如，如果限制某個事件的觸發頻率為 1 秒一次，那麼當該事件被觸發時，只有在上一次觸發的 1 秒後才會執行處理函數。如果該事件在 1 秒內多次觸發，那麼只有第一次觸發會執行處理函數，其餘的觸發會被忽略。 # debounce debounce 也是一個函數，用於限制某個事件觸發時的頻率。不同的是，debounce 的實現方式是在某個時間內，如果該事件被多次觸發，只執行最後一次觸發的事件處理函數，而忽略其餘的事件。例如，如果限制某個事件的觸發頻率為 1 秒一次，那麼當該事件被觸發時，會啟動一個計時器，設置一個延時為 1 秒的定時器。如果在這段時間內該事件再次被觸發，就會重新計時，直到定時器到期後才會執行事件處理函數。 --- 在實際應用中，如果需要在使用者連續滾動滑鼠滾輪時，實現類似於滾動條的效果，可以使用 throttle 函數來限制事件觸發頻率，以提高滾動的流暢度。 如果需要實現使用者在搜索框中輸入關鍵字時，只在用戶停止輸入一段時間後才開始搜索，可以使用 debounce 函數來限制事件觸發頻率，以減少不必要的搜索操作。 --- > 總結... > > throttle 和 debounce 都是用於限制某個事件的觸發頻率，但是它們的實現方式不同。 > > throttle 會在一定時間內==只執行一次事件處理==函數，而忽略其餘的事件 > > debounce 則是在某個時間內，如果該==事件被多次觸發，只執行最後一次觸發的事件==處理函數，而忽略其餘的事件。