JavaScript中短時間高頻次觸發事件的最佳化

　　在瀏覽器中，如果在短時間內多次觸發可以改變DOM樹結構的事件，可能導致頁面機構出現混亂甚至瀏覽器的崩潰。最近在做專案中，我無意中遇到一個問題，當滾到條到達某個高度時，使相應的元素從無到有，但是每次重新整理頁面後第一次到達時，滑鼠滾輪都會停頓下來，經過詢問老師和上網搜尋，發現是監聽捲軸事件造成的，因為捲軸動了一點，就會觸發很多次監聽事件，而且時間是極短的;所以就會造成瀏覽器也來不及反應，要卡在那一會。

　　後來我總結了幾種解決方法。

　　 一、函式節流

　　透過函式阻止相同的時間在較短 時間連續觸發

　　這裡透過200ms的延遲，當下次時間需要執行的時候，如果沒超過200ms，會先清除原來的延時器，從新開始定時;這樣可以保證兩次相同的時間最少間隔在200ms以上。

　　 二、防抖函式

　　防抖函式使在短時間內多次執行的事件合併成了一個時間在延遲時間後執行;

　　 三、使用 rAF(requestAnimationFrame)

　　此函式是瀏覽器原生方法，有固定的頻率，每秒執行60次函式，這樣在上次函式還沒結束前，下次函式不會呼叫執行。雖然這個方法效能更最佳化，但是此方法在時間上不能控制。

　　 本文來自千鋒教育，轉載請註明出處。