Question

我在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);
                }
            }
       }
 }});

这种情况发生在动态添加内容的网站上。（Google+）上。如果用户向下滚动并且只添加了一些新元素，那么一切都很完美。

如果用户暂时离开浏览器并点击导致显示许多新元素的按钮，MutationObserver似乎会错过某些节点。我可以在调试窗口中验证此行为。（使用＆＃34; nja＆＃34; -class的一些添加的div被写入控制台，有些不是＆＃39;

所以对我而言，似乎这只有在没有一次添加太多div时才有效。是否有任何配置可以改变这种行为？

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

Answer 1

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

例如，在具有变异观察者的页面上执行以下操作：

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

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

也许您只需要对每个添加的元素执行querySelectorAll。

Answer 2

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

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

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

＆＃13;

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);

＆＃13;

<div id="something" contenteditable>Something</div>

＆＃13;

MutationObserver不会获得所有更新

2 个答案: