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

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

一、函數節流

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

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

二、防抖函數

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

三、使用 rAF(requestAnimationFrame)

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

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

總結

以上是生活随笔為你收集整理的JavaScript中短时间高频次触发事件的优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。