函式節流（throttle）與 函式防抖（debounce）都是為了限制函式的執行頻次，以優化函式觸發頻率過高，導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象；也為了防止多次呼叫介面導致資料錯誤。
1、函式防抖(debounce)
//防抖debounce**：
function
debounce
(fn,delay)
, delay);}
;}// 處理函式
function
handle()
//滾動事件
window.
addeventlistener
('scroll'
,debounce
(handle,
500)
);
//節流throttle**：
function
throttle
(fn,delay)
, delay);}
;}function
sayhi
(e)window.
addeventlistener
('resize'
,throttle
(sayhi,
500)
);
函式防抖：將多次操作合併為一次操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否有延遲呼叫函式未執行。
區別：函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
參考文獻：
節流和防抖 區別和實現
實現 函式節流 開始會執行一次，持續觸發事件的話，每隔wait時間執行一次 應用場景mousemove,scroll等會連續執行的事件，比較適合應用於動畫相關的場景。param fn 需要節流的函式 param wait 間隔時間 export function throttle fn,wait 1...
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...