@utilslib/web/waitForElement

---

等待元素出现

---

waitForElement

函数签名

function waitForElement(selector: string, timeout: number = 5000): Promise<Element>

描述

等待元素出现

参数

参数名	类型	可选	默认值	描述
selector	string	否	-	-
timeout	number	是	5000	-

返回值

Promise<Element>

点击查看源码

js

/**
 * 等待元素出现
 * @param selector - CSS选择器
 * @param timeout - 超时时间（毫秒），默认5000
 * @returns Promise<Element> - 找到的元素
 */
export function waitForElement(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    // 立即检查元素是否已存在
    const element = document.querySelector(selector);
    if (element) {
      resolve(element);
      return;
    }
    // 使用 MutationObserver 监听DOM变化
    const observer = new MutationObserver(() => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        clearTimeout(timeoutId);
        resolve(element);
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
    // 设置超时
    const timeoutId = setTimeout(() => {
      observer.disconnect();
      reject(
        new Error(
          `Element with selector "${selector}" not found within ${timeout}ms`,
        ),
      );
    }, timeout);
  });
}

ts

/**
 * 等待元素出现
 * @param selector - CSS选择器
 * @param timeout - 超时时间（毫秒），默认5000
 * @returns Promise<Element> - 找到的元素
 */
export function waitForElement(
  selector: string,
  timeout: number = 5000,
): Promise<Element> {
  return new Promise((resolve, reject) => {
    // 立即检查元素是否已存在
    const element = document.querySelector(selector);
    if (element) {
      resolve(element);
      return;
    }

    // 使用 MutationObserver 监听DOM变化
    const observer = new MutationObserver(() => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        clearTimeout(timeoutId);
        resolve(element);
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });

    // 设置超时
    const timeoutId = setTimeout(() => {
      observer.disconnect();
      reject(
        new Error(
          `Element with selector "${selector}" not found within ${timeout}ms`,
        ),
      );
    }, timeout);
  });
}

如有错误，请提交issue :::