針對一些會頻繁觸發(fā)的事件如scroll、resize，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。

因此針對這類事件要進行防抖動或者節(jié)流處理

何為防抖？

作用是在短時間內(nèi)多次觸發(fā)同一個函數(shù)，只執(zhí)行最后一次，或者只在開始時執(zhí)行。

以用戶拖拽改變窗口大小，觸發(fā) resize 事件為例，在這過程中窗口的大小一直在改變，所以如果我們在 resize 事件中綁定函數(shù)，這個函數(shù)將會一直觸發(fā)，而這種情況大多數(shù)情況下是無意義的，還會造成資源的大量浪費。

話不多說上代碼：

執(zhí)行效果如下：

也就是用戶只要一直拖拽改變窗口大小，都會不斷的觸發(fā)fn函數(shù)，為了讓你們看得更形象一些我找了一張圖：

沒有經(jīng)過防抖處理效果大概就是這樣的，不進行防抖處理 遲早脖子扭斷，所以我們需要寫一個防抖函數(shù)來處理一下

處理后的效果：

在 debounce 中包裝我們的函數(shù)，過 2 秒觸發(fā)一次

• 在 resize 事件上綁定處理函數(shù)，這時 debounce 函數(shù)會立即調(diào)用，實際上綁定的函數(shù)時 debounce 函數(shù)內(nèi)部返回的函數(shù)。

• 每一次事件被觸發(fā)，都會清除當前的 timer 然后重新設置超時調(diào)用。 
  這就會導致每一次高頻事件都會取消前一次的超時調(diào)用，導致事件處理程序不能被觸發(fā)

• 只有當高頻事件停止，最后一次事件觸發(fā)的超時調(diào)用才能在delay時間后執(zhí)行

   

更進一步，我們不希望非要等到事件停止觸發(fā)后才執(zhí)行，我希望立刻執(zhí)行函數(shù)，然后等到停止觸發(fā) n 秒后，才可以重新觸發(fā)執(zhí)行。 
這里增加一個immediate參數(shù)來設置是否要立即執(zhí)行：

何為節(jié)流？

節(jié)流函數(shù)允許一個函數(shù)在規(guī)定的時間內(nèi)只執(zhí)行一次。

它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。

應用場景如：輸入框的實時查詢，可以限定用戶在輸入時，只在每兩秒鐘響應一次查詢。

主要有兩種實現(xiàn)方法：

• 時間戳

• 定時器

  間戳實現(xiàn)：

當高頻事件觸發(fā)時，第一次應該會立即執(zhí)行（給事件綁定函數(shù)與真正觸發(fā)事件的間隔如果大于delay的話），而后再怎么頻繁觸發(fā)事件，也都是會每delay秒才執(zhí)行一次。而當最后一次事件觸發(fā)完畢后，事件也不會再被執(zhí)行了。

定時器實現(xiàn)： 
當觸發(fā)事件的時候，我們設置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行；直到delay秒后，定時器執(zhí)行執(zhí)行函數(shù)，清空定時器，這樣就可以設置下個定時器。

當?shù)谝淮斡|發(fā)事件時，肯定不會立即執(zhí)行函數(shù)，而是在delay秒后才執(zhí)行。 
之后連續(xù)不斷觸發(fā)事件，也會每delay秒執(zhí)行一次。 
當最后一次停止觸發(fā)后，由于定時器的delay延遲，可能還會執(zhí)行一次函數(shù)。

可以綜合使用時間戳與定時器，完成一個事件觸發(fā)時立即執(zhí)行，觸發(fā)完畢還能執(zhí)行一次的節(jié)流函數(shù)：