MutationObserver：忽略一个 DOM 动作

Posted 2023-02-16

【中文标题】MutationObserver：忽略一个 DOM 动作

【英文标题】：MutationObserver: ignore a DOM action

【发布时间】：2017-11-27 21:44:34

【问题描述】：

如何创建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 的回调可能会在超时之后的某个时间被调用。

【参考方案1】：

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

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

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

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

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