JS中的防抖和節流

2021-09-26 16:07:21 字數 1004 閱讀 7783

防抖和節流是前端優化的一部分,可以防止過多的請求。在剛開始做專案的時候還沒有意識到,但是到了企業級開發或者大專案開發的時候,要考慮防抖和節流。

詳細請參考js:防抖動與節流

怎麼理解

防抖其實是使某一函式(請求)在使用者結束操作後的規定時間後再執行。

應用場景

比如在表單輸入時一般要進行非空校驗,如果沒有防抖的話,會在使用者每輸入乙個字元就執行一次非空校驗。

當有了防抖之後,可以使使用者在停止輸入後幾秒再進行非空校驗,這樣節省函式或者介面呼叫的次數,以此提高效能。

**

從**中可以看出,防抖的實質是維護乙個定時器,高頻事件觸發時會一直使定時器清零,只有當高頻事件停止後的的規定時間後,才會觸發函式。

怎麼理解

允許乙個函式在規定時間內只執行一次。

應用場景

比如在頁面無限載入的場景下,每隔一段時間就傳送一次請求,而不是在使用者停下滾動頁面操作時才去請求資料。

**

兩種方法分別是時間戳定時器

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

var throttle = function(func,delay)else

}}

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

JS 中的防抖和節流

防抖 當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。防抖 function debounce fn,wait 處理函式 function handle 滾動事件 window.addeventlistener scr...

js中的防抖和節流

防抖節流二者做的處理最終想要達到的目的就是減少對來自於頁面的操作。限制使用者互動次數,避免頻繁請求。主要用於一些可能會短時間內頻繁操作的事件。例如click scroll resize keydown mousemove,input等,對於這一類事件,會很有可能被重複操作,重複向伺服器請求資料。這樣...

js防抖和節流

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