函式防抖和函式節流

2021-10-04 01:12:51 字數 779 閱讀 4664

前言

函式防抖和節流是前端經常會用到的兩個技巧。在處理使用者互動時,我們可以通過這倆技巧來限制事件或者網路請求的觸發頻率。

1. 防抖

前端和服務端互動場景中,經常會有乙個輸入關鍵字查詢結果的需求,如果不做處理,可能會導致大量的請求到達服務端,並且大部分請求是沒有意義的。這個時候我們就可以使用防抖來優化一下。

我們希望的是在某個時間間隔內,假如事件一直被觸發,則不執行相關動作,直到某乙個事件的觸發間隔大於這個時間間隔時,才執行相關動作。

2. 節流

當前端做滾動載入時,需要在滾動到當前文件底部時,去載入新的資料。如果我們在滾動過程中一直觸發onscroll,顯然不合適,這個時候就可以使用節流來處理。

我們希望的是,通過既定頻率去觸發乙個動作。即使你觸發的再頻繁,也是按照這個頻率來執行相應的動作。

下面以滑鼠劃過事件來做個demo

這個demo很好理解,如果不做任何處理,那麼當滑鼠劃入時box的值會一直快速的增加。上述使用了防抖(debounce)來處理後,只會在動作結束後,過了delay這個時間間隔才會觸發一次。換成節流(throttle)的效果可以自行嘗試。

注意,防抖和節流都可以基於定時器來實現。上述例子還基於時間戳實現了節流throttle2,效果是一樣的

下面畫個圖總結一下防抖和節流的區別。

函式防抖和函式節流

1 函式防抖 函式防抖是指頻繁觸發的情況下,只有足夠的時間,才執行 一次,函式防防抖的要點也是要乙個settimeout來輔助實現,延遲執行需要跑的 如果方法多次觸發,則把上次記錄的延遲執行 用cleartimeout清理掉,重新開始。如果計時完畢,沒有方法來訪問觸發。則執行 函式防抖的應用場景,最...

函式防抖和函式節流

首先分別用一句話區分函式防抖和節流的區別。函式防抖就是在使用者停下相應動作,並在給定時間過去之後僅被呼叫一次。函式節流是使用者在執行相應動作時,每隔一段時間發一次請求。針對一些頻繁觸發的事件如scroll keyup resize,如果正常繫結事件的話,可能在很短的時間內連續觸發事件,十分影響效能。...

函式節流和函式防抖

概念 在規定的時間段內 例如1000ms 即使事件觸發了很多次,都只執行一次對應的任務。栗子 在我們進入地鐵站時通過閘機,每隔3秒內只允許乙個人通過,即使多個人同時刷卡,也只允許乙個人通過。運用場景 如果我們在改變瀏覽器的大小或者監聽滑鼠移動事件等事件 短時間內觸發多次 為了節省瀏覽器效能開銷,就可...