Question

如何使MutationObserver的观察实例忽略一些由我的代码引起的DOM更改？例如（使用jQuery）：

//initialize MutationObserver
var mo = new MutationObserver(mutations => console.log(mutations));
mo.observe(document.body, {attributes: true, subtree: true, characterData: true, attributeOldValue: true, characterDataOldValue: true, childList: true});

//case 1: perform a removal
$('.someDiv').remove();
//in this case an action is logged by MO

//case 2: perform a removal with a disconnected MO
mo.disconnect();
$('.someDiv').remove();
mo.observe(document.body, {...});
//in this case an action is logged again!

在这两种情况下，MO都会记录我对DOM所做的所有更改。我想出了唯一的方法：

//case 3: perform a removal with a disconnected MO, turning on after a timeout
mo.disconnect();
$('.someDiv').remove();
setTimeout(() => mo.observe(document.body, {...}), 500); //pseudo
//in this case MO skips an action above

但它不是该问题的最佳解决方案，因为在超时期间可能会有一些用户在页面上引起其他操作，或者可以在超时之后的某个时间内调用MutationObserver的回调。

Answer 1

MutationObserver的回调是异步调用的，因此当前执行的代码所做的更改只有在完成时才会被累积和提交。
这就是JavaScript event loop的工作原理。

如果您在同一事件中断开连接并重新连接，则需要明确耗尽队列：

mo.disconnect();
mo.takeRecords(); // deplete the queue

..............

mo.observe(......);

MutationObserver：忽略DOM动作

1 个答案: