Question

我页面上的内容是通过AJAX加载的（它是一步一步的过程），我需要检查是否存在特定的div。

点击几下即可显示特定div。我必须提一下，我不知道点击次数。

我怎样才能连续检查div是否存在，直到它找到它并且在它发现它做什么之后？

稍后编辑：我怎样才能不断检查，直到特定的div不存在并在此之后做某事。更确切地说div就在那里，但是在几次ajax调用之后它会被删除。

Answer 1

使用setInterval：

<div>
    <child-one>
        {{textOne}}
    </child-one>
    <child-two>
        {{textTwo}}
    </child-two>
</div>

使用var divCheckingInterval = setInterval(function(){ // Find it with a selector if(document.querySelector("#element")){ console.log("Found!"); clearInterval(divCheckingInterval); // Do something } }, 500); s显示div时更好的方法：

MutationObserver

只有在您指定的元素中添加或删除元素时才会触发MutationObserver构造函数中的函数，这样可以提高性能。

Answer 2

如果您无法控制AJAX负载，这可能是您的解决方案。

使用DOMSubtreeModified事件，这将允许任何方法，点击或任何方式添加（或删除）内容，并将被检测到。

(function(doc,found) {
  window.addEventListener('DOMSubtreeModified', function() {

    var yourdiv = doc.querySelector("#yourdiv");

    if(found && !yourdiv){
      // Was there but is gone, do something
      found = false;

    }

    if(yourdiv){
      // Found it, do something
      found = true;

    }

  }, false);
})(document,false);

这样工作，当插入（或删除）内容时，事件将触发并检查您的特定div。

它还有一个好处，就是不会像每个 nn 秒那样被调用，就像定时器一样，也不会在每次点击时被处理，只有当DOM改变时才会被处理。

正如@metarmask评论的那样，DOMSubtreeModified已被弃用，但仍然比较新的MutationObserver具有更好的跨浏览器覆盖率。

使用较新方法的等效样本将是

(function(doc,found) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

          var yourdiv = doc.querySelector("#yourdiv");

          if(found && !yourdiv){
            // Was there but is gone, do something
            found = false;

          }

          if(yourdiv){
            // Found it, do something
            found = true;

          }

        });
    });
    observer.observe(doc, { childList: true, subtree: true });
})(document,false);

Answer 3

使用setInterval定期检查您的div（下方500毫秒）。当它被发现时，采取行动并记住清除间隔。

t = setInterval(function(){
    var mydiv = $('div.myclass');
    if (mydiv.length > 0) {
        console.log('Div exists');
        clearInterval(t);
    }
}, 500);

Answer 4

如果在一定次数的点击后发生，您可以在每次点击页面后进行监控。

function checkIfDivExists () {
  if (document.querySelector('#your-div')) {
    // Stop monitoring
    document.removeEventListener('click', checkIfDivExists);
    // Do what you need to do
  }
}

document.addEventListener('click', checkIfDivExists)

通过这种方式，您只需要检查它是否有必要，而不是每秒尝试几次，这会减慢页面的速度。

Answer 5

var time = setInterval(check, 100);

check = function()
{
    if ($("div").length > 0 )
    {
        //do something
        clearInterval (time); // clear countdown
    }
}

不断检查是否存在某些事情并做某事

5 个答案: