承诺不能解决我期望的dom元素

发布于 2025-02-13 04:06:37 字数 1191 浏览 0 评论 0 原文

我使用 mutationObserver 和 href =“ https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/global_objects/promise/promise” rel =“ nofollow noreferrer”> promise promise 为了找到一个dom element的原因 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内检查Log condy element = ，那么我可以看到发现的元素并几次记录该元素，但结果并不能因此而解决该元素。

我期望 waitforelement 函数应每次更改DOM时找到按钮元素。

原文

I implemented a kind of logic using MutationObserver and Promise to find a DOM element for the reason of DOM changes.

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);
});

I think the page what I am on now has several iframes and has lazy load.

But I noticed that this works for only the first time specifically whenever I refresh a page.

If I check the log found element= inside the MutationObserver, then I can see the found element and logged that element several times, but it doesn't resolve that element as a result.

I am expecting that the waitForElement function should find the button element whenever the DOM changes every time.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

口干舌燥 2025-02-20 04:06:38

如评论中提到的，诺言只能解决一次。您可以在每次解决时创建一个新的承诺，以等待下一个承诺。使用您的代码结构，您可以等待循环中的承诺。

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>

As mentioned in the comments, a promise only resolves once. You can create a new promise each time it resolves, to wait for the next one. With your code structure, you can await the promise in a loop.

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);