第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

高效檢測單頁應(yīng)用中的 DOM 變化

高效檢測單頁應(yīng)用中的 DOM 變化

交互式愛情 2023-04-27 17:24:46
我正在構(gòu)建一個(gè) JS 庫,其中一個(gè)用例要求我在 DOM 更改時(shí)觸發(fā)一個(gè)事件,特別是如果它是一個(gè)單頁應(yīng)用程序,例如: github 搜索欄 經(jīng)過一些研究我發(fā)現(xiàn)MutationObserver:// Dom change event listnerMutationObserver = window.MutationObserver || window.WebKitMutationObserver;var observer = new MutationObserver(function(mutations, observer) {    // fired when a mutation occurs    attachListners();    // ...});observer.observe(documentAlias, {  subtree: true,  childList: true  //...});問題:我正在構(gòu)建的庫旨在插入任何網(wǎng)站,因此我無法控制 html 實(shí)現(xiàn)。我有點(diǎn)擔(dān)心使用突變觀察器可能會進(jìn)入無限循環(huán)。在同一行看到很多堆棧溢出問題。有沒有替代/更好的方法?如何安全有效地檢測 DOM 更新/更改?或者是變異觀察者最好的選擇
查看完整描述

1 回答

?
忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個(gè)贊

MutationObserver可能是您最好的選擇。之前MutationObserver,有Mutation 事件,但現(xiàn)在已棄用且不推薦使用。

另一個(gè)(可以說是糟糕的)選擇是使用setTimeout并定期檢查 DOM 的變化。但這將需要您編寫一個(gè)函數(shù)來獲取要檢查的節(jié)點(diǎn)并將當(dāng)前值與舊值進(jìn)行比較。這不會那么有效,因?yàn)榧词箾]有任何更改,您也會每 X 毫秒檢查一次節(jié)點(diǎn)。

您應(yīng)該能夠以不會發(fā)生無限循環(huán)的方式編寫代碼。如果您遇到無限循環(huán),則應(yīng)將該代碼添加到上面的問題中。

就性能而言,因?yàn)?code>MutationObserver會給你舊值和新值,你可以比較這些值而不是遍歷整個(gè) DOM。例如,像這樣:

let observer = new MutationObserver((mutations) => {

? mutations.forEach((mutation) => {

? ? let oldValue = mutation.oldValue;

? ? let newValue = mutation.target.textContent;

? ? if (oldValue !== newValue) {

? ? ? ? // do something

? ? }

? });

});


observer.observe(document.body, {

? characterDataOldValue: true,?

? subtree: true,?

? childList: true,?

? characterData: true

});


查看完整回答
反對 回復(fù) 2023-04-27
  • 1 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號