如何在 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中文網其他相關文章！