不使用定时器或固定重试时间，等待DOM节点加载完成的更优方案

封装轻量DOM等待函数是兼顾性能和复用性的最优实现方案，完全解决你提到的所有痛点： #

1. 无轮询空耗、节点响应即时
2. 自动销毁观测实例无内存泄漏
3. 支持缩小观测范围避免无关DOM变更触发
4. 调用方式简洁，全场景复用

封装代码

function waitForElement(selector, options = {}) {
  const { 
    root = document.body, // 可手动指定观测根节点，缩小范围可大幅降低无关触发
    timeout = 0 // 超时时间，单位ms，0代表不设超时
  } = options;

  return new Promise((resolve, reject) => {
    // 先查询一次已存在的节点，避免不必要的观测
    const existingEl = document.querySelector(selector);
    if (existingEl) {
      return resolve(existingEl);
    }

    const observer = new MutationObserver((mutations) => {
      // 过滤无元素变更才执行匹配，进一步减少不必要的查询
      const hasElementChange = mutations.some(m => m.addedNodes.length || m.removedNodes.length);
      if (!hasElementChange) return;

      const targetEl = document.querySelector(selector);
      if (targetEl) {
        observer.disconnect();
        resolve(targetEl);
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true
    });

    // 超时自动销毁逻辑
    if (timeout > 0) {
      setTimeout(() => {
        observer.disconnect();
        reject(new Error(`waitForElement timeout: 选择器"${selector}"在${timeout}ms内未匹配到节点`));
      }, timeout);
    }
  });
}

使用示例

// 基础用法
waitForElement('small > time')
  .then(neededElement => {
    // 原定时器里的业务逻辑直接写在这里
  })
  .catch(err => console.warn(err));

// 高性能场景：已知目标节点肯定在id为content的容器内，指定root缩小观测范围+3秒超时
waitForElement('small > time', {
  root: document.getElementById('content'),
  timeout: 3000
}).then(el => {
  // 业务代码
})

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