检查 div 是否存在，如果不存在 - 再次检查直到它被创建答案

【问题标题】：Check if div exists, if not - check again until it is created检查 div 是否存在，如果不存在 - 再次检查直到它被创建
【发布时间】：2017-09-28 09:03:04
【问题描述】：

我有一个由插件创建的 div，在页面呈现后出现（总是在不同的时间）。

我需要检查这个div是否存在，然后执行一组函数。但是，如果它尚不存在，我想等待（检查）直到它出现，然后执行该组函数。

这是我现在正在使用的：

var check = setInterval(function(){
  if ($('#target-div').length){
    console.log('execute set of functions')
    clearInterval(check);
  }
}, 100);

但是，有没有办法永久检查 div 是否退出（比如在后台运行它或其他什么）并且一旦它被创建 - 停止，但没有 setInterval？

因为我有多个类似的检查，并且每次都必须设置一个新的/不同的 setInterval 会变得一团糟。

谢谢。

【问题讨论】：

您可以使用While Loop - 然而 while 循环可能会锁定您的浏览器并使其崩溃。 SetIntervat 每次都会中断，允许用户继续与浏览器交互。
不要使用 DOM 轮询来执行此操作，使用 Mutation Observer
@Fran 不太可能，因为它会阻止 UI 更新。
@Fran，我怀疑它会，因为它需要我增加值（在我的例子中是 div 的长度），但我需要它自动检查值是否已更改。
@RoryMcCrossan - 你是对的。我只是注意到，在我写它的时候，...更新了评论。

标签： javascript jquery html function

【解决方案1】：

不要使用 DOM 轮询来执行此操作，因为它是一种反模式。请改用Mutation Observer。这是一个监听器，可以设置为在对 DOM 进行某些更改时触发，例如。子节点或属性修改。试试这个：

var $div = $("#container");

new MutationObserver(function(mutations) {
  console.log('.foo was appended');
}).observe($div[0], {
  childList: true
});

setTimeout(function() {
  $div.append('<div class="foo">foo</div>');
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  Appending an element in 2 seconds...
</div>

请注意，这是一个非常基本的示例。您可以以任何需要的方式调整您提供给MutationObserver() 的处理程序函数，因为mutations 参数提供了有关刚刚发生的更改的大量信息。

有关详细信息，请参阅上面的 MDN 文档链接。

【讨论】：