我們為什麼要用防抖節流？
首先我們要知道防抖節流是用來做什麼的。
瀏覽器中的某些計算和處理要比其他的昂貴得多，當我們試圖用dom操作html頁面時，如果是進行很多頻繁的dom操作，這很可能導致瀏覽器掛起，甚至崩潰。在ie中使用 onresize事件時容易發生這種情況，我們有必要控制js的執行次數，這時候我們的節流和防抖就能發揮用處了。
應用場景：頁面的onscroll事件，頁面的onscroll事件是乙個高頻的事件，通過監聽頁面的scroll事件：
// 函式節流的實現;
function
throttle
(fn, delay)};
}
將節流函式封裝成乙個檔案 在元件中按需引入（防抖如下）
// 上啦載入
onload()
,
使用者在輸入表單時，當使用者輸入第乙個字元不進行驗證，隔了一段時間，若使用者又進行輸入，這一次才去進行校驗
我們用乙個防抖函式來實現這個過程：
// 函式防抖的實現
export
function
debounce
(fn, wait)
// 設定定時器，使事件間隔指定事件後執行
timer =
settimeout((
)=>
, wait);}
;}
debounce()，接收兩個引數： 第乙個引數為要執行的操作（傳入的執行函式），第二個引數為間隔時間
效能優化 防抖和節流
在連續觸發的事件中，事件處理函式的頻繁呼叫會加重瀏覽器或伺服器的效能負擔導致使用者體驗糟糕，有哪些連續觸發的事件呢 比如，瀏覽器滾動條的滾動事件 瀏覽器視窗調節的resize事件 輸入框內容校驗以及在移動端的touchmove事件等 所以，我們將採用防抖函式 debounce 和節流函式 throt...
JS效能優化 防抖和節流
防抖和節流嚴格算起來應該屬於效能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。舉個例子吧 監聽滾動條的高度 需求很簡單，直接寫 function showtop window.onscroll showtop 但是！你會發現只要你一改變高度，它就會列印一次高度，隨便...
js優化之防抖節流
應用場景 搜尋框 滾動條的監聽事件處理，防止每輸入乙個字 滾動螢幕，都會觸發事件處理，造成效能浪費。短時間內大量觸發同一事件，只會執行一次函式，實現原理為設定乙個定時器，約定在xx毫秒後再觸發事件處理，每次觸發事件都會重新設定計時器，直到xx毫秒內無第二次操作 引數1為觸發事件函式，參2位延遲時間 ...