在瀏覽器中，如果在短時(shí)間內(nèi)多次觸發(fā)可以改變DOM樹(shù)結(jié)構(gòu)的事件，可能導(dǎo)致頁(yè)面機(jī)構(gòu)出現(xiàn)混亂甚至瀏覽器的崩潰。最近在做項(xiàng)目中，我無(wú)意中遇到一個(gè)問(wèn)題，當(dāng)滾到條到達(dá)某個(gè)高度時(shí)，使相應(yīng)的元素從無(wú)到有，但是每次刷新頁(yè)面后第一次到達(dá)時(shí)，鼠標(biāo)滾輪都會(huì)停頓下來(lái)，經(jīng)過(guò)詢(xún)問(wèn)老師和上網(wǎng)搜索，發(fā)現(xiàn)是監(jiān)聽(tīng)滾動(dòng)條事件造成的，因?yàn)闈L動(dòng)條動(dòng)了一點(diǎn)，就會(huì)觸發(fā)很多次監(jiān)聽(tīng)事件，而且時(shí)間是極短的;所以就會(huì)造成瀏覽器也來(lái)不及反應(yīng)，要卡在那一會(huì)。

后來(lái)我總結(jié)了幾種解決方法。

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

通過(guò)函數(shù)阻止相同的時(shí)間在較短 時(shí)間連續(xù)觸發(fā)

這里通過(guò)200ms的延遲，當(dāng)下次時(shí)間需要執(zhí)行的時(shí)候，如果沒(méi)超過(guò)200ms，會(huì)先清除原來(lái)的延時(shí)器，從新開(kāi)始定時(shí);這樣可以保證兩次相同的時(shí)間最少間隔在200ms以上。

二、防抖函數(shù)

防抖函數(shù)使在短時(shí)間內(nèi)多次執(zhí)行的事件合并成了一個(gè)時(shí)間在延遲時(shí)間后執(zhí)行;

三、使用 rAF(requestAnimationFrame)

此函數(shù)是瀏覽器原生方法，有固定的頻率，每秒執(zhí)行60次函數(shù)，這樣在上次函數(shù)還沒(méi)結(jié)束前，下次函數(shù)不會(huì)調(diào)用執(zhí)行。雖然這個(gè)方法性能更優(yōu)化，但是此方法在時(shí)間上不能控制。

本文來(lái)自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。