如何在MutationObserver中每次检测到目标按钮出现时返回true值

MutationObserver 的回调属于异步触发逻辑，无法通过常规的 return 语句同步向外层代码返回值，你可以通过以下两种方式实现每次按钮出现时拿到 true 值的需求：

方案1：自定义回调函数（适合单模块内处理逻辑） #

直接定义接收通知的处理函数，在满足触发条件时调用并传入true：

// 自定义处理函数，每次按钮出现时都会执行，参数就是你需要的true值
function onPodButtonShow(isAppeared) {
  // 此处写按钮出现后需要执行的业务逻辑
  console.log("按钮已出现，接收值：", isAppeared);
}

let observer = new MutationObserver(function(mutations) {
  for (let i = 0; i < mutations.length; i++) {
    // 新增属性过滤，只处理class属性的变动，避免误触发
    if (mutations[i].attributeName === 'class' && mutations[i].oldValue === "button ng-hide") {
      console.log("Button is appearing...");
      onPodButtonShow(true);
    }
  }
});

let target = document.querySelector('[search-model="pod"]');
// 新增节点存在判断，避免节点未加载完成时报错
if (target) {
  observer.observe(target, { attributes : true, attributeOldValue: true, subtree: true});
}

// 后续需要停止监听时执行：observer.disconnect()

方案2：自定义事件（适合跨模块/多位置监听的场景） #

通过抛出全局自定义事件的方式传递通知，任何模块都可以监听事件拿到true值：

let observer = new MutationObserver(function(mutations) {
  for (let i = 0; i < mutations.length; i++) {
    if (mutations[i].attributeName === 'class' && mutations[i].oldValue === "button ng-hide") {
      // 抛出自定义事件，携带true值
      const showEvent = new CustomEvent('pod-button-appear', {
        detail: true
      });
      window.dispatchEvent(showEvent);
    }
  }
});

let target = document.querySelector('[search-model="pod"]');
if (target) {
  observer.observe(target, { attributes : true, attributeOldValue: true, subtree: true});
}

// 任意需要接收通知的位置，直接监听事件即可
window.addEventListener('pod-button-appear', (e) => {
  const isAppeared = e.detail; // 拿到true值
  console.log("收到按钮出现通知：", isAppeared);
  // 执行对应业务逻辑
});

优化建议 #

• 可以在判断条件中额外增加当前节点是否已移除ng-hide类的校验，逻辑更严谨：!mutations[i].target.classList.contains('ng-hide')
• 若按钮是动态增删的DOM节点而非仅通过class控制显隐，可以调整监听配置为监听子节点变动，适配不同场景

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