为何仅保留循环时MutationObserver才能检测到元素属性变化？

问题根源 #

你当前的代码存在两个核心问题：

1. 当目标元素#sequence被找到时，data-dash-is-loading属性可能还未被添加/修改，仅在元素首次出现时创建的Observer，无法覆盖后续属性从无到有的场景；而不清空setInterval时重复创建了多个Observer，反而意外适配了属性变化的时机
2. 属性判断逻辑未考虑data-dash-is-loading不存在的情况，getAttribute会返回null，导致判断不够精准

优化方案：用MutationObserver替代轮询检测元素 #

相比setInterval轮询，用MutationObserver监听DOM变化来等待目标元素出现更高效，也能彻底避免循环持续运行的问题。同时优化属性监听逻辑：

document.addEventListener("DOMContentLoaded", function() {
  // 第一个Observer：监听DOM变化，等待目标元素出现
  const elementObserver = new MutationObserver(function(mutations) {
    const loading = document.getElementById("sequence");
    if (loading) {
      console.log("loading detected");
      // 找到元素后，断开元素监听的Observer
      elementObserver.disconnect();

      // 第二个Observer：监听目标元素的属性变化
      const loadingObserver = new MutationObserver(function(mutations) {
        console.log("mutation detected");
        // 用dataset判断更可靠，属性不存在时返回undefined
        const isLoading = loading.dataset.dashIsLoading === 'true';
        if (isLoading) {
          console.log("loading");
          // loading.style.visibility = 'hidden';
        } else {
          console.log("not loading");
          // loading.style.visibility = 'visible';
        }
      });

      // 配置监听特定属性，减少不必要的触发
      const observerOptions = {
        attributes: true,
        attributeFilter: ['data-dash-is-loading'] // 只监听目标属性
      };

      loadingObserver.observe(loading, observerOptions);
    }
  });

  // 监听body的子元素变化，直到找到目标元素
  elementObserver.observe(document.body, {
    childList: true,
    subtree: true // 监听所有子节点，包括嵌套的
  });
});

关键改进点 #

• 用Observer替代轮询：避免了setInterval持续运行的问题，DOM有变化时才触发检测，性能更优
• 精准监听属性：通过attributeFilter指定只监听data-dash-is-loading，减少不必要的Mutation回调触发
• 更可靠的属性判断：使用dataset访问自定义属性，属性不存在时返回undefined，判断逻辑更清晰
• 避免重复监听：找到目标元素后立即断开元素监听的Observer，确保只创建一次属性监听的Observer

额外说明 #

如果目标元素的父元素是固定的，可以把document.body换成具体的父元素，进一步缩小监听范围，提升性能。

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