debounce 防抖和 throttle 節流

視窗的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函式較為複雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少觸發的頻率，同時又不影響實際效果。

debounce（防抖），簡單來說就是防止抖動。

從上圖中我們可以看到，當持續觸發事件時，debounce會合併事件且不會去觸發事件，當一定時間內沒有觸發再這個事件時，才真正去觸發事件～ 一起來實現個簡單的debounce：

function

debounce
(fn, delay) ;
return
function
() // 重新設定事件觸發的定時器
timer = settimeout(later, delay);};}

throttle（節流），當持續觸發事件時，保證隔間時間觸發一次事件。

}效果圖:

根據實際業務場景，合理的利用debounce（防抖）和throttle（節流）可以優化效能和提高使用者體驗。兩者間的核心區別就在於持續觸發事件時，前者合併事件並在最後時間去觸發事件，而後者則是隔間時間觸發一次～

settimeout 定時器

w3school

ruanyifeng

手寫防抖debounce

防抖 debounce 一段時間不觸發事件才執行一次handle函式 const input1 document.getelementbyid input1 let timer null input1.addeventlistener keyup function timer settimeout ...

防抖 debounce 和節流 throttle

當呼叫動作觸發一段時間後，才會執行該動作，若在這段時間間隔內又呼叫此動作則將重新計算時間間隔。function debounce method,timeout,context timeout function handleresize window.onresize debounce handler...

debounce防抖函式的使用

說明 1.首頁有30多張，每次載入完都要執行乙個refresh的函式，由於執行次數過多，對refresh函式進行防抖 2.位於元件goodsitem.vue中，需要傳送事件給home.vue 步驟 1.建立乙個utils.js檔案封裝debounce函式 func為要執行的函式 要防抖的 delay...