因為在瀏覽器中調用某些方法頻率比我們想象中的要快，這樣會損失一部分性能，處理不當或者放任不管就容易引起瀏覽器卡死。所以我們就會用到節(jié)流和防抖，他們其實屬于性能優(yōu)化的方法。

防抖（debounce）

我做過的一個簡單的應用就是監(jiān)控瀏覽器上下滾動位置，但瀏覽器執(zhí)行的頻率太快，防抖就是給出一個時間，在這個時間里如果再次觸發(fā)這個函數(shù)，就重新計時，知道這個時間內沒有再次觸發(fā)這個函數(shù)，就執(zhí)行。

結果就是，在短時間內觸發(fā)大量的同一事件，只會執(zhí)行一次。

這里我們就用到settimeout函數(shù)了；

代碼如下：

防抖函數(shù)

首先判斷是否有定時器timer，如果有，就清除定時器；如果沒有，那就設定一個定時器timer。當重復執(zhí)行此函數(shù)時，在delay的時間內重復判斷上面的情況，直到delay時間內，沒有再清除定時器timer后，執(zhí)行函數(shù)func。

節(jié)流（throttle）

所謂節(jié)流，就是指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)。說白了就是，我可以控制他的輸出頻率，比如：我想讓他10秒輸出一次或者1秒輸出一次結果。

那么怎么實現(xiàn)呢？

有兩種方法：一個是時間戳的方法，一個是settimeout的方法。

我們先來說settimeout的方法：

節(jié)流函數(shù)

先判斷是否有timer，如果沒有，就設定一個定時器去執(zhí)行，在設定的這個定時器delay時間內，如果再次觸發(fā)了這個函數(shù)，就會忽略，知道delay時間過后timer執(zhí)行完后悔再次重新設定timer。我們通過設定delay來控制輸出的頻率。

另一種方法是時間戳的方法：

這塊我借用http://www.itdecent.cn/p/c8b86b09daf0這篇文章中的時間戳方法。

時間戳方法

這個就會說會重復判斷now-previous>wait這個條件，如果當前時間減去上一個執(zhí)行函數(shù)時間大于我們所設定的輸出頻率時間，就會輸出結果一次，同時將這次輸出結果的時間設定為previous，如果now-previous<wai,則不會輸出結果。重復執(zhí)行這個函數(shù)。

上述內容基于防抖和節(jié)流的核心思路設計了簡單的實現(xiàn)算法，但是不代表實際的庫的源碼就直接是這樣的。

如果內容有錯誤的地方歡迎指出（覺得看著不理解不舒服想吐槽也完全沒問題）；如果有幫助，歡迎點贊和收藏，轉載請征得同意后著明出處，如果有問題也歡迎私信交流。