断开 Mutation Observer 与回调函数的连接答案

【问题标题】：Disconnect Mutation Observer from Callback Function断开 Mutation Observer 与回调函数的连接
【发布时间】：2017-05-10 11:38:03
【问题描述】：

如何断开我的变异观察者与其回调函数的连接？正在按照应有的方式观察更改，但我想在第一次更改后断开观察者的连接。由于观察者变量超出了范围，因此它没有按应有的方式断开连接。如何将观察者变量传递给回调函数以便代码正常工作？

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    if ( mutation.type === 'characterData' ) {
      console.log('1st change.');
      observer.disconnect(); // Should disconnect here but observer variable is not defined.
    }
    else if ( mutation.type === 'childList' ) {
      console.log('2nd change. This should not trigger after being disconnected.');
    }
  });
}

jQuery(document).ready(function() {
  setTimeout(function() {
    document.querySelector('div#mainContainer p').innerHTML = 'Some other text.';
  }, 2000);

  setTimeout(function() {
    jQuery('div#mainContainer').append('<div class="insertedDiv">New div!<//div>');
  }, 4000);

  var targetOne = document.querySelector('div#mainContainer');
  var observer = new MutationObserver( mutate );
  var config = { attributes: true, characterData: true, childList: true, subtree: true };

  observer.observe(targetOne, config);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="mainContainer">
    <h1>Heading</h1>
    <p>Paragraph.</p>
  </div>
</body>

【问题讨论】：

这能回答你的问题吗？ MutationObserver disconnect() call inside callback function

标签： javascript disconnect mutation-observers

【解决方案1】：

最简单的方法是调整你的回调

function mutate(mutations) {

到

function mutate(mutations, observer) {

因为与突变关联的观察者实例会自动作为第二个参数传递给突变处理函数。

然后您可以在任何需要的时候拨打observer.disconnect()。

【讨论】：

是的，但是如何将观察者变量作为参数传递给 mutate()？您能否详细说明您的代码，以便我无法对其进行测试？我很想看看你的代码是如何工作的。
你不必，MutationObserver 会自动传递它，就像传递 mutations 一样。
@guest271314 我尝试了 loganfsmyth 的方法，是的，它确实有效。我只是想了解为什么实际学习一些关于 JS 的知识。
@GTSJoe 忽略之前的评论。 loganfsmyth 是正确的。不正确，这里。 "callback 将在每个 DOM 突变上调用的函数。观察者将使用两个参数调用此函数。第一个是一个对象数组，每个都是 MutationRecord 类型。第二个是这个 MutationObserver 实例。" developer.mozilla.org/en-US/docs/Web/API/MutationObserver
你也可以在回调中使用this.disconnect()，因为它是由API自动绑定的。