js優化之防抖節流

2021-10-23 04:55:49 字數 468 閱讀 8086

應用場景:

搜尋框/滾動條的監聽事件處理,防止每輸入乙個字/滾動螢幕,都會觸發事件處理,造成效能浪費。

短時間內大量觸發同一事件,只會執行一次函式,實現原理為設定乙個定時器,約定在xx毫秒後再觸發事件處理,每次觸發事件都會重新設定計時器,直到xx毫秒內無第二次操作

引數1為觸發事件函式,參2位延遲時間

function delayshake(fn, time) , time)

}}

節流函式

防抖是延遲執行,而節流是間隔執行,函式節流即每隔一段時間就執行一次,實現原理為設定乙個定時器,約定xx毫秒後執行事件,如果時間到了,那麼執行函式並重置定時器,和防抖的區別在於,防抖每次觸發事件都重置定時器,而節流在定時器到時間後再清空定時器

function throttle(fn, time) , time)}}

}

js節流防抖

什麼是節流防抖?在學習這個問題前,我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊,很簡單的功能嘛,如下 text id input let input document.getelementbyid input input.addeventlistene...

js防抖節流

第一種 function debounce fn,delay delay 第二種 function debounce fn,delay delay 立即執行就是事件觸發後立即執行,然後超過一段時間沒有觸發事件,執行函式才會被觸發執行 function fn,delay timer settimeou...

JS防抖節流

在事件被觸發n秒後再執行 函式,如果在這n秒內又被觸發,則重新計時。1 使用者在輸入框中連續輸入一串字元後,只會在輸入完後去執行最後一次的查詢ajax請求,這樣可以有效減少請求次數,節約請求資源 2 window的resize scroll事件,不斷地調整瀏覽器的視窗大小 或者滾動時會觸發對應事件,...