Promise 没有像我预期的那样解析 DOM 元素答案

【问题标题】：Promise doesn't resolve a DOM element what I expectedPromise 没有像我预期的那样解析 DOM 元素
【发布时间】：2022-07-06 04:08:54
【问题描述】：

我实现了一种逻辑，使用MutationObserver和Promise来查找DOM元素，因为DOM发生了变化。

const waitForElement = async (
  selector
) => {
  return new Promise((resolve) => {
    const observer = new MutationObserver(() => {
        const element = document.querySelector(selector);
        console.log('found element=', element);

        if (element) {
          observer.disconnect();
          resolve(element);
        }
    });

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


waitForElement('button[data-test="node"]').then(el => {
  console.log('button element', el);
});

我认为我现在所在的页面有几个 iframe 并且有延迟加载。

但我注意到这仅在我刷新页面时才第一次起作用。

如果我检查 MutationObserver 中的日志 found element=，那么我可以看到找到的元素并多次记录该元素，但结果并没有解析该元素。

我希望 waitForElement 函数在 DOM 每次发生变化时都能找到按钮元素。

【问题讨论】：

承诺不会一直返回。一旦你解决了它就完成了。
承诺只解决一次。也许你只需要没有 promise 包装器的观察者
...或者您可能想要Observable
我不想使用额外的库或框架。我需要专注于纯 JavaScript。
如果我的 Promise 解决了一次，那为什么我看不到已解决的元素？

标签： javascript dom promise

【解决方案1】：

如 cmets 中所述，promise 仅解析一次。您可以在每次解决时创建一个新的承诺，以等待下一个。使用您的代码结构，您可以循环等待承诺。

const container = document.getElementById("container");

const waitForElement = async(
  selector
) => {
  return new Promise((resolve) => {
    const observer = new MutationObserver(() => {
      const element = document.querySelector(selector);
      console.log('found element=', element.nodeName);

      if (element) {
        observer.disconnect();
        resolve(element);
      }
    });
    observer.observe(container, {
      childList: true
    });
  });
}

(async() => {
  while (true) {
    let el = await waitForElement('button[data-test="node"]');
    console.log('button element', el.nodeName);
  }
})();


setInterval(() => {
  container.innerHTML = '<button data-test="node">X</button>';
}, 2000);

<div id="container">

</div>

【讨论】：