如何延迟 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)