JavaScript 如何有效率地等待元素存在？

等待元素存在

Web 開發通常涉及動態更新的網頁，其中元素出現或消失。因此，確定特定元素何時可用變得至關重要。在本文中，我們將探索一個強大的解決方案，使用 MutationObserver API 等待元素存在。

MutationObserver：原生解決方案

MutationObserver API 提供了監控 DOM 變化的通用方法。它允許我們創建一個觀察者來監視特定元素或整個文檔，並在出現符合我們條件的更改時通知我們。

實施解決方案

以下內容代碼片段展示了waitForElm 的實現函數：

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

用法

要使用waitForElm函數，只需傳入所需元素的選擇器即可。傳回一個 Promise，該 Promise 在元素可用時解析：

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

優點

與傳統輪詢方法或 jQuery內建的方法相比，此解決方案具有多個優點：

• 高效：沒有不必要的輪詢，節省系統資源。
• 精確：保證在元素實際存在時觸發。
• 原生：無第三方函式庫或繁重依賴關係。
• 支援 async/await： 無縫與現代非同步程式整合。

透過利用 MutationObserver API，您可以有效地等待 Web 應用程式中存在的元素，確保可靠且及時的操作。

以上是JavaScript 如何有效率地等待元素存在？的詳細內容。更多資訊請關注PHP中文網其他相關文章！