在JavaScript中,实现“等待功能可用”的方法有很多,以下是一些通用的方法:
setTimeout
函数function waitForElement(element) {
setTimeout(() => {
// 检查元素是否已经加载完成
if (element.isConnected) {
// 执行相关操作
console.log("元素已加载完成");
} else {
// 继续等待
waitForElement(element);
}
}, 1000); // 等待1秒
}
// 使用示例
waitForElement(document.querySelector("#my-element"));
Promise
和async/await
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);
}
})();
MutationObserver
监听DOM变化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 });
这些方法都可以实现“等待功能可用”的效果,具体应
云原生正发声
技术创作101训练营
新知
企业创新在线学堂
Elastic 中国开发者大会
企业创新在线学堂
云+社区技术沙龙[第20期]
云+社区沙龙online第5期[架构演进]
企业创新在线学堂
领取专属 10元无门槛券
手把手带您无忧上云