Question

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

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

以下是我现在正在使用的内容：

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

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

因为我有多个类似的检查，每次都要设置一个新的/不同的setInterval，这总是很麻烦。

感谢。

Answer 1

不要使用DOM轮询来执行此操作，因为它是反模式。请改用ans from post here。这是一个侦听器，可以设置为在对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文档链接。

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

1 个答案: