如何暂停 JavaScript 执行直到特定 DOM 元素出现？-js教程-PHP中文网

如何暂停 JavaScript 执行直到特定 DOM 元素出现？

Patricia Arquette

发布： 2024-12-09 14:46:14

原创

885 人浏览过

How Can I Pause JavaScript Execution Until a Specific DOM Element Appears?

如何暂停代码直到元素出现？

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

登录后复制

用法

要等待类为 'some-class' 的元素出现，可以使用：

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

登录后复制

或者，与async/await:

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

登录后复制

这种方法有几个优点，包括：

非阻塞：它使用 MutationObserver API，被动监视更改不阻塞主线程。
否依赖： 仅依赖原生 API，无需第三方库。
Promise-Based： 返回一个 Promise，方便你处理元素的外观与 .then() 或 async/await.

以上是如何暂停 JavaScript 执行直到特定 DOM 元素出现？的详细内容。更多信息请关注PHP中文网其他相关文章！