使用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中文網其他相關文章！
