时间戳

首页 > 解决方案 > 如何使用 Mutation 观察者而不是 settimeout 来附加 div

javascript - 如何使用 Mutation 观察者而不是 settimeout 来附加 div

问题描述

如果DOM中存在具有特定类的元素，我有js代码附加一个div。这是代码。首先创建一个具有特定类的 div 的步骤。然后它检查 Dom 是否有一个类 id 为 banner 的元素，如果有，它将使用 insertBefore 附加创建的 div。我正在使用它，因为横幅元素是动态添加到 dom 中的，并且并不总是出现在 Dom 中。这工作正常。

var overlayelem = document.createElement('div');
overlayelem.setAttribute("class", "overlay");

setTimeout(function(){
  var elem = document.getElementById('banner');
  elem.parentNode.insertBefore(overlayelem, elem.nextSibling);
}, 10)

但问题是我不能完全依赖 setTimeout，我希望使用突变 ovberser 来实现这一点，所以尝试使用它并且代码是这样的（删除了 setTimeout）

var overlayelem = document.createElement('div');
overlayelem.setAttribute("class", "overlay");


var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList")  {
      var elem = document.getElementById('banner');
      if(elem) {
        elem.parentNode.insertBefore(overlayelem, elem.nextSibling);
      }
    }
  })
})

var elemBody = document.getElementById("body")
observer.observe(elemBody, {
  childList: true,
  subtree: true,
})

但这不能正常工作。该网站不断加载，永不停止。任何人都可以帮助解决 Mutationobersever 中出了什么问题。

标签： javascriptmutation-observers

解决方案

刚刚迷路observer.disconnect();？

observer.observe(elemBody, {
  childList: true,
  subtree: true,
})
//like this
observer.disconnect();

推荐阅读