用js寫出函式防抖和節流

1. 什麼是函式防抖

函式防抖（debounce）就是指觸發事件後，在n秒內函式只能執行一次，如果事件在n秒內後被觸發了一次，則重新計算函式執行時間。

2. 為什麼需要函式防抖

前端事件中（如onresize，scroll，mousemove，mousehover等）會被頻繁觸發，不做限制可能一秒之內執行幾十上百次，如果在這些函式內部執行了其他方法，尤其是操作了dom元素，那麼不僅浪費計算機資源，還會降低程式執行速度，甚至會造成瀏覽器卡死，崩潰。

另外，重複呼叫ajax不僅會造成資料關係的混亂，還會造成網路擁躉，增加伺服器壓力。

3. 防抖的應用場景

4. 防抖的實現原理

防抖函式的要點，是需要乙個settimeout來輔助實現，延遲執行需要執行的**，如果方法再次觸發，則把上次記錄的延遲執行**清除掉，重新開始計時，若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標**。

5. 防抖的**實現

function
debounce
(fn, wait)
timer =
settimeout
(fn, wait);}
}function
func()
window.
addeventlistener
('resize'
,debounce
(func,
1000))
;

1. 節流和防抖的區別

實用防抖的結果是，在限定時間內，不斷觸發事件，理論上就永遠不會執行後續的方法。

而防抖則是，計時不斷觸發事件，也能在某個時間間隔之後給出反饋。

2. 節流的實現原理

節流的原理非常簡單，我們可以設計一種類似控制閥門一樣定期開放的函式，也就是說，讓函式執行一次之後，在某個時間段內暫時失效，過了這個時間段之後再重新啟用。

3. 節流的應用場景

4. 節流的**實現

節流可通過兩種方法來實現，乙個是定時器（類似於防抖），另乙個是時間戳。

function
throttle
(fn, wait)
, wait);}
}}function
func()
window.
addeventlistener
('resize'
,throttle
(func,
1000))
;

function
throttle
(fn, wait)}}
function
func()
window.
addeventlistener
('resize'
,throttle
(func,
1000))
;

上面的**有個小問題，就是我希望執行的方法沒辦法傳參，下面是解決方法：

//在防抖或節流的 return方法內部
var context =
this
;var args = arguments;
//將 fn()更改為
fn.(context, args)
;