检查div是否存在，如果不存在-重复检查直到其被创建

Question

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

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

这是我目前正在使用的：

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

然而，是否有一种方法可以永久性地检查div是否存在（比如在后台运行或其他方式），并且只要它被创建就停止，但不使用setInterval？

因为我有多个类似的检查，每次都必须设置新的/不同的setInterval，这让代码变得非常混乱。

谢谢。

- Dennis Novac

---

不要使用DOM轮询来完成此操作，而应该使用变动观察器。 - Rory McCrossan

@Fran不太可能，因为它会阻止UI的更新。 - Rory McCrossan

@Fran，我怀疑不会，因为它要求我增加值（在我的情况下是div的长度），但我需要它自动检查值是否已更改。 - Dennis Novac

@RoryMcCrossan - 你说得对。我在写的时候才注意到这一点，已经更新了评论。 - Nope

新创建的 div 包含类或 ID 吗？ - Deepu Reghunath

Answer 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 文档链接。

- Rory McCrossan