等待页面元素出现 - Javascript

在开发Web应用时，我们通常需要对页面中某些元素进行操作。例如，在进行自动化测试时，我们需要确保页面中的某个元素已经出现。这就需要使用等待页面元素出现的技术。

Javascript提供了一些API可以用来实现等待页面元素出现的功能。

使用setTimeout方法

setTimeout方法可以用来设置一个定时器，在定时器到期后执行一个函数。我们可以结合定时器和循环来等待页面元素出现。

function waitForDisplayed(selector, timeout, interval) {
    return new Promise((resolve, reject) => {
        const start = Date.now();
        const timer = setInterval(() => {
            const el = document.querySelector(selector);
            if (el && el.offsetParent !== null) {
                clearInterval(timer);
                resolve();
            } else if (Date.now() - start > timeout) {
                clearInterval(timer);
                reject(new Error(`wait for "${selector}" exceeded ${timeout}ms`));
            }
        }, interval);
    });
}

waitForDisplayed('.my-element', 5000, 100);

上面的代码中，我们使用了一个循环和setTimeout方法来检查页面中指定的元素是否已经出现。其中，函数的三个参数分别为需要等待的元素的选择器、超时时间和轮询频率。

使用MutationObserver对象

MutationObserver是一个可以监听DOM变化的对象。我们可以使用MutationObserver来监听指定的元素是否出现。

function waitForDisplayed(selector, timeout) {
    return new Promise((resolve, reject) => {
        const el = document.querySelector(selector);
        if (el) {
            resolve();
            return;
        }
        let observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                const el = mutation.target.querySelector(selector);
                if (el) {
                    observer.disconnect();
                    resolve();
                }
            });
        });
        let timer = setTimeout(() => {
            observer.disconnect();
            reject(new Error(`wait for "${selector}" exceeded ${timeout}ms`));
        }, timeout);
        observer.observe(document, {
            childList: true,
            subtree: true,
            attributes: false,
            characterData: false,
        });
    });
}

waitForDisplayed('.my-element', 5000);

上面的代码中，我们使用MutationObserver对象来监听页面变化，并且使用setTimeout方法来设置超时时间。其中，函数的两个参数分别为需要等待的元素的选择器和超时时间。

总结

等待页面元素出现是Web应用开发的一个非常重要的技能。Javascript提供了多种方法来实现等待页面元素出现的功能，包括结合定时器和循环，以及使用MutationObserver对象。开发者可以根据实际需求选择不同的方法来实现等待页面元素出现的功能。