針對一些會頻繁觸發的事件如scroll、resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。
因此針對這類事件要進行防抖動或者節流處理
它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現 debouncing 的方法是將若干個函式呼叫合成 一次，並在給定時間過去之後僅被呼叫一次。12
3456
78910
1112
1314
1516
// 將會包裝事件的 debounce 函式
functiondebounce(fn, delay) , delay);
}
}12
3456
789// 當使用者滾動時被呼叫的函式
functionfoo()
// 在 debounce 中包裝我們的函式，過 2 秒觸發一次
let elem = document.getelementbyid('container');
elem.addeventlistener('scroll', debounce(foo, 2000));
更進一步，我們不希望非要等到事件停止觸發後才執行，我希望立刻執行函式，然後等到停止觸發 n 秒後，才可以重新觸發執行。
這裡增加乙個immediate引數來設定是否要立即執行：12
3456
78910
1112
1314
1516
1718
1920
2122
2324
functiondebouce(func,delay,immediate),delay);
//立即執行
if(donow)
}else,delay);
}
}
}
節流是另一種處理類似問題的解決方法。
節流函式允許乙個函式在規定的時間內只執行一次。
它和防抖動最大的區別就是，節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。
比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流閥技術來實現。
主要有兩種實現方法：
時間戳實現：12
3456
78910
1112
varthrottle =function(func,delay)
}
}
當高頻事件觸發時，第一次應該會立即執行（給事件繫結函式與真正觸發事件的間隔如果大於delay的話），而後再怎麼頻繁觸發事件，也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了。
定時器實現：
當觸發事件的時候，我們設定乙個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒後，定時器執行執行函式，清空定時器，這樣就可以設定下個定時器。12
3456
78910
1112
1314
varthrottle = fucntion(func,delay),delay);
}
}
}
當第一次觸發事件時，肯定不會立即執行函式，而是在delay秒後才執行。
之後連續不斷觸發事件，也會每delay秒執行一次。
當最後一次停止觸發後，由於定時器的delay延遲，可能還會執行一次函式。
可以綜合使用時間戳與定時器，完成乙個事件觸發時立即執行，觸發完畢還能執行一次的節流函式：12
3456
78910
1112
1314
1516
1718
19varthrottle =function(func,delay)else
}
}
需要在每個delay時間中一定會執行一次函式，因此在節流函式內部使用開始時間、當前時間與delay來計算remaining，當remaining<=0時表示該執行函式了，如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件，那麼會取消當前的計時器，並重新計算乙個remaining來判斷當前狀態。
防止乙個事件頻繁觸發**函式的方式：
防抖動與節流
針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。所以我們對於這種事件我們要進行防抖動或者節流的處理來優化效能。防抖動 將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在de...
防抖動與節流
針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現debouncing的方法是將若干個函式呼叫合成一次，並在給定時間過去之後僅被呼叫一次。123 4567 ...
js 函式節流 與 防抖動
函式節流 就如同成都搖號買房，前乙個進去選房了，下乙個就要等一段時間。這種策略就很好的解決了，一大波人進去選房，銷售妹妹沒發接待的尷尬局面。應用場景 監聽瀏覽器滾動條，然後觸發函式。普通做法 document.getelementbyid throttle onscroll function 函式節...