如何在 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 中尚不存在的元素。在将观察者附加到它之前，您应该轮询该元素。

查看此 post 以获得有关轮询功能的指导：https://davidwalsh.name/javascript-polling

此外，您可以尝试将观察者包裹在 setTimeout 中以测试这是否确实是问题所在。例如：

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

如何在 JavaScript 中延迟突变观察者？

How can I delay a mutation observer in JavaScript?

html

javascript

mutation-observers