防抖與節流(例項)

2022-10-09 00:03:18 字數 619 閱讀 7076

防抖

函式防抖(debounce),就是指觸發事件後,在n秒內函式只能執行一次,如果觸發事件後在n秒內又觸發了事件,則會重新計算函式延執行時間。

只執行最後一次

使用者名稱密碼輸入 介面呼叫

當使用者在短時間內,多次點選登陸,傳送簡訊等請求資料的操作時

文字編輯器一段時間不操作,進行自動儲存

搜尋框進行聯想,使用者不斷輸入值,只在停頓1s時才進行聯想

節流節流(throttle),當持續觸發事件時,保證在一定時間內只呼叫一次事件處理函式,實際上,假設乙個使用者一直觸發這個函式,且每次觸發小於既定值,函式節流會每隔這個時間呼叫一次

無限量載入

節流與防抖

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

防抖與節流

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

節流與防抖

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