如何延遲 JavaScript 中的突變觀察者？

Question

我在嘗試使用 JS 的 MutationObserver 時有點受阻，我希望有人可以幫助我找到可能的解決方案。

我有以下 HTML 標記：

<div class="box--html">
 <div class="box__body"></div>
</div>

我想使用 JavaScript 突變觀察器來查找上述元素何時出現在頁面上以便插入腳本。

到目前為止我嘗試過的，在 console.log 中給了我一個錯誤，如：

const observer = new MutationObserver(function (mutation_el) {
 mutation_el.forEach(function (mutation) {
   if(added_node.class == 'box__body') {
     console.log('Resource box appeared'); 
     // some long script
     $(document).ready(function () {...});
     observer.disconnect();
   }
 });
});

observer.observe(document.querySelector(".box--html"), {subtree: false, childList: true});

"Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'" 。

如果我必須在這個mutationObserver中插入一個延遲，我應該如何編寫代碼？

任何建議都可以很好地解決這個問題，提前致謝！

Answer 1

根據您的 JavaScript 加載時間，您的變異觀察者很可能正在尋找 DOM 中尚不存在的元素。 在將觀察者附加到元素之前，您應該輪詢該元素。

查看此帖子以獲取有關輪詢功能的指導： https : //davidwalsh.name/javascript-polling

此外，您可以嘗試將您的觀察者包裝在 setTimeout 中以測試這實際上是問題所在。 例如：

setTimeout(() => {
   ...observer code here
}, 5000)