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

【问题标题】：How can I delay a mutation observer in JavaScript?如何在 JavaScript 中延迟突变观察者？
【发布时间】：2021-07-19 15:51:55
【问题描述】：

我在尝试使用 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中插入延迟，我应该如何编写代码？

任何建议都可以很好地解决这个问题，在此先感谢！

【问题讨论】：

标签： javascript html mutation-observers

【解决方案1】：

根据您的 JavaScript 加载时间，您的变异观察者可能正在寻找 DOM 中尚不存在的元素。在将观察者附加到它之前，您应该轮询该元素。

查看这篇文章以获取有关轮询功能的指导：https://davidwalsh.name/javascript-polling

此外，您可以尝试将观察者包装在 setTimeout 中，以测试这实际上是问题所在。比如：

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

【讨论】：