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