如何等待元素的存在？

Question

如何等待元素的存在？我正在研究Chrome的一个扩展，我想知道：什么是了解元素何时出现的最佳方法？使用普通的javascript，间隔可以检查元素的存在，或者jQuery有一些简单的方法可以做到这一点？

Answer 1

DOMNodeInserted由于性能问题，与其他DOM突变事件一起被弃用-推荐的方法是使用突变观察员去看多姆。不过，只有在较新的浏览器中才支持它，所以您应该回到DOMNodeInserted什么时候MutationObserver没有时间。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return

    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i]
    }
  })})observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false})// stop watching using:observer.disconnect()

Answer 2

下面是一个等待元素显示的核心JavaScript函数。

参数：

1. selector

   该函数查找元素${selector}

2. time此函数每隔${time}毫秒检查该元素是否存在。

   function waitForElementToDisplay(selector, time) {
           if(document.querySelector(selector)!=null) {
               alert("The element is displayed, you can put your code instead of this alert.")
               return;
           }
           else {
               setTimeout(function() {
                   waitForElementToDisplay(selector, time);
               }, time);
           }
       }

作为一个例子，设置selector="#div1"和time=5000将查找其id="div1"每5000毫秒。