如何在另一个函数内部断开MutationObserver的连接？

这个问题其实很好解决，核心就是要让你想用来停止观察的那个函数，能拿到MutationObserver的实例——毕竟只有实例才能调用disconnect()方法嘛！

你原来的代码里，MutationObserver是observeMutations函数内部的局部变量，外部函数根本访问不到，自然没法停止它。下面给你几种实用的解决方案：

方案一：让观察函数返回Observer实例 #

这是最直接的方式，调用observeMutations时把实例存下来，之后在任何函数里都能调用停止方法：

function observeMutations(object){
  var targetNode = object;
  console.log(targetNode);
  var config = { attributes: true, childList: true };
  var callback = function(mutationsList) {
    console.log(mutationsList);
    for(var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        console.log('A child node has been added or removed.');
      }
    }
  };

  // 创建Observer实例
  const observer = new MutationObserver(callback);
  // 开始观察目标节点
  observer.observe(targetNode, config);
  
  // 返回实例，让外部可以获取
  return observer;
}

// 调用函数并保存Observer实例
const myObserver = observeMutations(document.getElementById('your-target-node'));

// 在另一个函数里断开连接
function stopObserving() {
  myObserver.disconnect();
  console.log('已停止DOM突变观察');
}

方案二：把Observer实例存在外部可访问的变量中 #

如果不想处理返回值，也可以提前在外部声明变量存储实例：

// 在外部作用域声明变量（尽量用模块级作用域，避免全局污染）
let mutationObserverInstance;

function observeMutations(object){
  var targetNode = object;
  console.log(targetNode);
  var config = { attributes: true, childList: true };
  var callback = function(mutationsList) {
    console.log(mutationsList);
    for(var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        console.log('A child node has been added or removed.');
      }
    }
  };

  // 把实例存到外部变量里
  mutationObserverInstance = new MutationObserver(callback);
  mutationObserverInstance.observe(targetNode, config);
}

// 另一个函数里停止观察
function stopObserving() {
  if (mutationObserverInstance) {
    mutationObserverInstance.disconnect();
    mutationObserverInstance = null; // 清空实例，避免重复调用
    console.log('已停止DOM突变观察');
  }
}

方案三：用闭包封装观察逻辑（更优雅的模块化方式） #

如果想让代码更整洁，也可以用闭包把观察的启动和停止逻辑封装在一起：

function createMutationObserver(targetNode) {
  const config = { attributes: true, childList: true };
  const callback = function(mutationsList) {
    console.log(mutationsList);
    for(var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        console.log('A child node has been added or removed.');
      }
    }
  };

  const observer = new MutationObserver(callback);
  
  // 返回包含启动、停止方法的控制对象
  return {
    startObserving: () => observer.observe(targetNode, config),
    stopObserving: () => {
      observer.disconnect();
      console.log('已停止DOM突变观察');
    }
  };
}

// 创建观察控制器
const observerController = createMutationObserver(document.getElementById('your-target-node'));
// 启动观察
observerController.startObserving();

// 在任意函数里调用停止方法
function stopWatching() {
  observerController.stopObserving();
}

不管用哪种方式，核心思路都是让外部函数能够访问到MutationObserver的实例，这样就能通过调用实例的disconnect()方法来停止观察了。

内容的提问来源于stack exchange，提问作者Xardas105