如何暫停 JavaScript 執行直到特定 DOM 元素出現？

如何暫停程式碼直到元素出現？

在 Web 開發中，通常需要僅當特定元素存在時才執行操作頁面。這就提出瞭如何確定元素是否存在的問題，尤其是在像 JavaScript 這樣的非同步環境中。

解決方案：利用 MutationObserver API

MutationObserver API 提供了強大的功能用於檢測 DOM 變化的解決方案。透過建立觀察者實例並將其指派給所需元素或其父元素，您可以設定一個回調，當觀察區域內發生突變（新增、刪除或屬性變更）時將觸發該回呼。

實作

提供的程式碼片段示範如何使用建立可重複使用的waitForElm 函數MutationObserver:

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('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

要等待類別為'some-class'的元素出現，可以使用：

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

或者，與async/await:

• 這種方法有幾個優點，包括：
• 非阻塞：它使用MutationObserver API，被動監視更改不阻塞主執行緒。
• 否依賴： 僅依賴原生 API，無需第三方函式庫。

Promise-Based： 回傳一個 Promise，方便你處理元素的外觀與 .then() 或 async/await.

以上是如何暫停 JavaScript 執行直到特定 DOM 元素出現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！