帶你徹底弄懂JS中的節流和防抖

2021-10-23 23:12:16 字數 564 閱讀 7131

首先,節流和防抖都是用於不斷觸發事件的情況,比如onscroll事件,如果不設定節流和防抖,當你繫結onscroll事件並設定事件處理函式,你滑動滾輪就會執行n多次的事件處理函式,造成效能損耗。節流和防抖有時候也會應用在input keydown事件,根據具體情況選擇節流還是防抖。

先簡單解釋一下節流和防抖的概念。

var flag =

true

//節流閥預設為true

window.

onscroll

=function()

,500

)//若事件被極頻繁觸發,也能保證至少等待0.5秒再執行下一次

//的事件處理函式

}

var timer =

null

//準備乙個timer變數來操作定時器

window.

onscroll

=function()

,500

)秒內不觸發該事件,則執行一次延時器內**

}

JS中的防抖和節流

防抖和節流是前端優化的一部分,可以防止過多的請求。在剛開始做專案的時候還沒有意識到,但是到了企業級開發或者大專案開發的時候,要考慮防抖和節流。詳細請參考js 防抖動與節流 怎麼理解 防抖其實是使某一函式 請求 在使用者結束操作後的規定時間後再執行。應用場景 比如在表單輸入時一般要進行非空校驗,如果沒...

JS 中的防抖和節流

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

js中的防抖和節流

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