如何暫停程式碼直到元素出現？
在 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);
});const elm = await waitForElm('.some-class');或者，與async/await:
以上是如何暫停 JavaScript 執行直到特定 DOM 元素出現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
