MutationObserver 没有得到所有更新答案

【问题标题】：MutationObserver does not get all updatesMutationObserver 没有得到所有更新
【发布时间】：2015-03-26 20:23:38
【问题描述】：

我在 chrome 扩展中有以下代码：

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
    if (mutation.type === "childList") {
       Log.Debug("mutation: Childlist:"+mutation.addedNodes.length);
        forEach.call(mutation.addedNodes, function (addedNode) {
            if (addedNode.classList !== undefined) {
                if (addedNode.classList.contains('nja')) {
                    Log.Debug("DOM PD:"+addedNode.classList);
                    DoFancyStuff(addedNode);
                }
            }
       }
 }});

这发生在动态添加内容的网站上。（谷歌+）。如果用户向下滚动并添加一些新元素，一切都会完美无缺。

如果用户离开浏览器一段时间并单击导致显示许多新元素的按钮，则 MutationObserver 似乎错过了一些节点。我可以在调试窗口中验证此行为。（一些添加的带有“nja”类的 div 被写入控制台，有些没有）

所以对我来说，这似乎只有在一次没有添加太多 div 的情况下才有效。是否有任何配置可以改变这种行为？

（因为这是一个 chrome 扩展，我只需要 chrome 的解决方案，而不是任何其他浏览器）

【问题讨论】：

标签： javascript jquery google-chrome mutation-observers

【解决方案1】：

如果带有nja 类的div 是要添加的元素的子元素，则该突变观察者将看不到它。

例如，使用突变观察者在页面上执行以下操作：

var added = document.createElement('section');
added.innerHTML = '<div class="nja">nested</div>';
document.body.appendChild(added);

您应该看到观察者将为section 元素运行，而不是div.nja。

也许你只需要在每个添加的元素上做一个querySelectorAll。

【讨论】：

【解决方案2】：

大家好，我发现 MutationObserver 在检测 [contenteditable] 元素中的文本更改时非常糟糕。特别是在我使用的 Mac OS Safari 中。

我偶然发现，当我在我的网站上使用 void SetInterval 时，MutationObserver 或多或少地按预期工作，即使在 Safari 中也是如此。

下面是我的小提琴jsfiddle 的工作示例。查看控制台输出以查看更改 SetInterval 持续时间时的响应性。还可以尝试注释掉整个 SetInterval 以查看观察者会变得多么糟糕。

var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var time = new Date();
    console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds());
    console.log(target.innerHTML);
  });
});
observer.observe(target, {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
});
//observer.disconnect(); - to stop observing


setInterval(function() {}, 10);

&lt;div id="something" contenteditable&gt;Something&lt;/div&gt;

【讨论】：

这需要调查一下?