js实现等待效果
实现等待效果的几种方法
使用 setTimeout
通过 setTimeout 可以延迟执行代码，模拟等待效果。适用于简单的延迟操作。
console.log("开始等待");
setTimeout(() => {
console.log("等待结束");
}, 2000); // 等待2秒使用 Promise 和 async/await
通过 Promise 结合 async/await 可以更优雅地实现等待效果，适用于异步操作。
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log("开始等待");
await wait(3000); // 等待3秒
console.log("等待结束");
}
demo();使用 setInterval 实现周期性等待
setInterval 可以周期性地执行代码，适合需要重复等待的场景。
let counter = 0;
const intervalId = setInterval(() => {
console.log(`等待第${++counter}次`);
if (counter >= 5) {
clearInterval(intervalId);
console.log("等待结束");
}
}, 1000); // 每秒执行一次使用 CSS 动画模拟视觉等待效果
通过 CSS 动画和 JavaScript 结合，可以实现视觉上的等待效果，比如加载动画。
const spinner = document.createElement("div");
spinner.style.width = "50px";
spinner.style.height = "50px";
spinner.style.border = "5px solid #f3f3f3";
spinner.style.borderTop = "5px solid #3498db";
spinner.style.borderRadius = "50%";
spinner.style.animation = "spin 1s linear infinite";
document.body.appendChild(spinner);
// 移除加载动画
setTimeout(() => {
spinner.remove();
console.log("加载完成");
}, 3000);使用 requestAnimationFrame 实现平滑等待
requestAnimationFrame 适合需要与浏览器渲染同步的等待效果，比如动画或游戏。
function waitAnimation(ms) {
const start = performance.now();
function checkTime(timestamp) {
if (timestamp - start >= ms) {
console.log("等待结束");
return;
}
requestAnimationFrame(checkTime);
}
requestAnimationFrame(checkTime);
}
console.log("开始等待");
waitAnimation(2000); // 等待2秒注意事项
setTimeout和setInterval的时间参数单位为毫秒。async/await需要包裹在异步函数中使用。- 清除定时器或动画帧可以避免内存泄漏。
- 视觉等待效果可以结合 CSS 或第三方库（如
Spin.js）增强用户体验。
