如何在 JavaScript 中高效地等待元素存在？

使用 MutationObserver 等待元素存在

正如您在 Chrome 扩展程序开发中遇到的那样，了解元素何时可用非常重要页面。虽然使用间隔来检查其外观是一种常见的方法，但它可能效率低下。幸运的是，jQuery 没有提供简单的解决方案。

现代且有效的替代方案是利用 MutationObserver API。这允许您创建一个侦听 DOM 树中的更改的 JavaScript 函数：

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

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

此函数采用选择器作为输入，并返回一个 Promise，该 Promise 在找到元素时解析。

要使用它，您可以编写：

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

或者，用异步/等待：

const elm = await waitForElm('.some-class');

以上是如何在 JavaScript 中高效地等待元素存在？的详细内容。更多信息请关注PHP中文网其他相关文章！