如何使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的回调。
最佳答案
MutationObserver的回调是异步调用的,因此当前执行的代码所做的更改仅在完成时才累积并提交。
这就是JavaScript event loop的工作方式。
如果在同一事件中断开连接并重新连接,则需要显式耗尽队列:
mo.disconnect();
mo.takeRecords(); // deplete the queue
..............
mo.observe(......);
关于javascript - MutationObserver:忽略DOM操作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44736209/