JS簡單實現防抖和節流

2021-08-21 21:27:01 字數 2041 閱讀 5941

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時間後執行

另一種解決方案比 防抖 要寬鬆些,這時我們不想使用者一味的輸入,而是給使用者一些搜尋提示,所以在當中限制每過500ms就查詢一次此時的string,這就是節流。

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

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

1)時間戳實現:

function

throttle

(func, delay)

}}

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

2)定時器實現:

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

fucntion throttle(func, delay), delay);

}}}

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

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

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

3)綜合使用時間戳與定時器,完成乙個事件觸發時立即執行,觸發完畢還能執行一次的節流函式

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 重新計時。適用場景 乙個輸入框連...