事件節流與事件防抖

2022-05-10 12:46:45 字數 770 閱讀 2954

事件防抖:最後一次觸發說了算。在一定時間內,不管你出發了多少次,我都只認最後一次。假設設定時間為 1000ms,這在 1000ms 內你再次觸發這個事件,就新增乙個新的計時器,之前的事件統統作廢,只執行最後一次。這裡的抖動停止表示你停止了觸發這個函式,從這個時間點開始計算,當間隔時間等於你設定時間,才會執行裡面的**函式。如果你一直在觸發這個函式並且兩次觸發間隔小於設定時間,則一定不會到**函式那一步。。主要應用是:驗證碼防刷,按鈕頻繁點選導致多次請求,給伺服器造成壓力;使用者註冊時驗證使用者名稱是否被占用,為了提高使用者體驗,不是在輸入框失去焦點的時候去判斷,而是在使用者輸入的時候去判斷,這樣的壞處是,當使用者輸入第乙個字元的時候就開始判斷,增大了伺服器的壓力,理想的情況是,在使用者輸入乙個字元一段時間內還有字元的輸入就暫時不去判斷。

事件節流:第乙個觸發說了算,按照固定的時間執行一次,無論在這個固定的時間之內觸發了多少次事件,也只執行一次。主要應用是:scroll,touchmove。

事件防抖應用:需求是input輸入內容停頓間隔1000ms後觸發callback

var oinput = document.getelementsbytagname("input");

oinput.addeventlistener("input", debounce(callback, 500))

function

debounce (fn, delay) , delay)

}}function

callback(event)

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發,一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發,在一秒內只能觸發一次。比如滾動條持續向下滾動,載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中,我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料,根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步,那麼當使用者的操作十分頻繁時,就會多出許多無用的事件操作,並加重瀏覽器的負擔,影響頁面的效能。這時我們可以採用debounce 防抖 和thr...