变异观察者- DOM被回调函数改变

Mutation observer - DOM is changed by callback function

本文关键字：回调 函数 改变 DOM 观察者 变异      更新时间：2023-09-26

是否有办法，如何强制突变观察者忽略由回调函数引起的DOM变化?

现在我有:

var config = { attributes: true, childList: true, characterData: true };
var target = document.body;
var timer;
// create an observer instance
var observer = new MutationObserver(function(mutations) {
   // fired when a mutation occurs
   timer = setTimeout(function () {
      _3rd_party_callback();

   }, 500);  
});
observer.observe(target, config);

问题是，_3rd_party_callback回调引起DOM变化，所以它永远不会停止。正如它的名字所说，它是第三方函数，我不能更改(实际上它的DOM操作是它的目的)。

所以我所做的是在回调函数调用之前和之后分别断开和启动observer。

  observer.disconnect()
  _3rd_party_callback();
  observer.observe(target, config);

它似乎可以工作，但我担心，由于事件的异步处理，我可能会禁用观察者，当其他更改发生并错过它们时。

不太可能有办法将更改从页面本身和回调中分离出来，但我会尝试一下。

如果observer只会observe目标而没有其他目标，您的想法将有效。这不是一个特别有效的解决方案，因为每次重置可观察对象时你都必须重新设置钩子，但它会起作用。

observer.disconnect()
_3rd_party_callback();
observer.observe(target, config);

由于所有DOM更改都发生在主事件循环中，因此您错过由_3rd_party_cb以外的任何事件引起的事件的可能性为0。因此，您断开您的观察者，调用第三方代码，然后重新连接它—在DOM更改之间没有任何步骤。然而，如果第三方代码推迟了一个更改，例如setTimeout(messupthedom, 0)，你仍然会在你的可观察对象中发现这些更改。

相关文章：