首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我需要一个通用的javascript“等待功能可用”

在JavaScript中,实现“等待功能可用”的方法有很多,以下是一些通用的方法:

  1. 使用setTimeout函数
代码语言:javascript
复制
function waitForElement(element) {
  setTimeout(() => {
    // 检查元素是否已经加载完成
    if (element.isConnected) {
      // 执行相关操作
      console.log("元素已加载完成");
    } else {
      // 继续等待
      waitForElement(element);
    }
  }, 1000); // 等待1秒
}

// 使用示例
waitForElement(document.querySelector("#my-element"));
  1. 使用Promiseasync/await
代码语言:javascript
复制
async function waitForElement(element) {
  const startTime = performance.now();
  while (true) {
    // 检查元素是否已经加载完成
    if (element.isConnected) {
      // 执行相关操作
      console.log("元素已加载完成");
      break;
    }
    const currentTime = performance.now();
    const timeElapsed = currentTime - startTime;
    await new Promise(resolve => setTimeout(resolve, 1000 - timeElapsed));
  }
}

// 使用示例
(async () => {
  try {
    const startTime = performance.now();
    const element = await waitForElement(document.querySelector("#my-element"));
    // 在这里执行相关操作
  } catch (error) {
    console.error(error);
  }
})();
  1. 使用MutationObserver监听DOM变化
代码语言:javascript
复制
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    Array.from(mutation.addedNodes).forEach(addedNode => {
      if (addedNode.matches && addedNode.matches("#my-element")) {
        // 执行相关操作
        console.log("元素已加载完成");
      }
    });
  });
});

// 使用示例
observer.observe(document.body, { childList: true, subtree: true });

这些方法都可以实现“等待功能可用”的效果,具体应

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券