防抖和節流嚴格算起來應該屬於效能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。
舉個例子吧：監聽滾動條的高度
需求很簡單，直接寫**：
function
showtop()
window.onscroll = showtop
效果：如果短時間內大量觸發同一事件，只會執行一次函式。
實現：實現的關鍵在於settimeout這個函式，由於還需要乙個變數來儲存計時，考慮維護全域性純淨，可以借用閉包來實現。
/*
* fn [function] 需要防抖的函式
* delay [number] 毫秒，防抖期限值
*/function
debounce
(fn,delay)
else}}
/*****************************簡化後的分割線 ******************************/
function
debounce
(fn,delay)
timer =
settimeout
(fn,delay)
// 簡化寫法}}
// 然後是舊**
function
showtop()
window.onscroll =
debounce
(showtop,
1000
)// 為了方便觀察效果我們取個大點的間斷值，實際使用根據需要來配置
定義：讓某個時間期限內，事件處理函式只執行一次
如果在限定時間段內，不停觸發滾動事件，只要不停止觸發，理論上就永遠不會輸出當前距離頂部的距離。
處理方法：即使使用者不斷拖動滾動條，也能在某個時間間隔之後給出反饋
function
throttle
(fn,delay)
// 工作時間，執行函式並且在間隔期內把狀態位設為無效
valid =
false
settimeout((
)=>
, delay)}}
/* 請注意，節流函式並不止上面這種實現方案,
例如可以完全不借助settimeout，可以把狀態位換成時間戳，然後利用時間戳差值是否大於指定間隔時間來做判定。
也可以直接將settimeout的返回的標記當做判斷條件-判斷當前定時器是否存在，如果存在表示還在冷卻，並且在執行fn之後消除定時器表示啟用，原理都一樣
*/// 以下照舊
function
showtop()
window.onscroll =
throttle
(showtop,
1000
)
效能優化 防抖和節流
在連續觸發的事件中，事件處理函式的頻繁呼叫會加重瀏覽器或伺服器的效能負擔導致使用者體驗糟糕，有哪些連續觸發的事件呢 比如，瀏覽器滾動條的滾動事件 瀏覽器視窗調節的resize事件 輸入框內容校驗以及在移動端的touchmove事件等 所以，我們將採用防抖函式 debounce 和節流函式 throt...
效能 防抖和節流
為了提高頁面效能，有時需要對高頻率觸發的事件 scrllo,resize,mousemove,touchmove 進行防抖 debounce 或者節流 throttle 處理。這兩個概念很相似，但是他們是不同的概念 把一系列連續的事件，只處理一次，即只呼叫一次事件處理程式。強調一系列連續觸發的事件。...
js優化之防抖節流
應用場景 搜尋框 滾動條的監聽事件處理，防止每輸入乙個字 滾動螢幕，都會觸發事件處理，造成效能浪費。短時間內大量觸發同一事件，只會執行一次函式，實現原理為設定乙個定時器，約定在xx毫秒後再觸發事件處理，每次觸發事件都會重新設定計時器，直到xx毫秒內無第二次操作 引數1為觸發事件函式，參2位延遲時間 ...