JS簡單實現防抖和節流

ps: 比如搜尋框，使用者在輸入的時候使用change事件去呼叫搜尋，如果使用者每一次輸入都去搜尋的話，那得消耗多大的伺服器資源，即使你的伺服器資源很強大，也不帶這麼玩的。

其中一種解決方案就是每次使用者停止輸入後，延遲超過500ms時，才去搜尋此時的string，這就是防抖。

* 原理：將若干個函式呼叫合成為一次，並在給定時間過去之後僅被呼叫一次。

* **實現：

function

debounce
(fn, delay) , delay);
}}let flag = 0; // 記錄當前函式呼叫次數
// 當使用者滾動時被呼叫的函式
function
foo() 
// 在 debounce 中包裝我們的函式，過 2 秒觸發一次
document.body.addeventlistener('scroll', debounce(foo, 2000));

debounce函式封裝後，返回內部函式

每一次事件被觸發，都會清除當前的timer然後重新設定超時並呼叫。這會導致每一次高頻事件都會取消前一次的超時呼叫，導致事件處理程式不能被觸發

只有當高頻事件停止，最後一次事件觸發的超時呼叫才能在delay時間後執行

* 原理：節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。

* **實現有兩種，一種是時間戳，另一種是定時器

1）時間戳實現：

function

throttle
(func, delay)
}}

當高頻事件觸發時，第一次應該會立即執行（給事件繫結函式與真正觸發事件的間隔如果大於delay的話），而後再怎麼頻繁觸發事件，也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了。

當觸發事件的時候，我們設定乙個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒後，定時器執行執行函式，清空定時器，這樣就可以設定下個定時器。

fucntion throttle(func, delay), delay);

}}}

當第一次觸發事件時，肯定不會立即執行函式，而是在delay秒後才執行。

之後連續不斷觸發事件，也會每delay秒執行一次。

當最後一次停止觸發後，由於定時器的delay延遲，可能還會執行一次函式。

function

throttle
(func, delay)else
}}

需要在每個delay時間中一定會執行一次函式，因此在節流函式內部使用開始時間、當前時間與delay來計算remaining，當remaining <= 0時表示該執行函式了，如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件，那麼會取消當前的計時器，並重新計算乙個remaining來判斷當前狀態。

JS簡單實現防抖和節流

ps 比如搜尋框，使用者在輸入的時候使用change事件去呼叫搜尋，如果使用者每一次輸入都去搜尋的話，那得消耗多大的伺服器資源，即使你的伺服器資源很強大，也不帶這麼玩的。其中一種解決方案就是每次使用者停止輸入後，延遲超過500ms時，才去搜尋此時的string，這就是防抖。function debo...

js防抖和節流

在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...

js 防抖和節流

突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...