当前位置：首页 > JavaScript

js实现等待效果

2026-01-30 11:37:25JavaScript

实现等待效果的几种方法

在JavaScript中实现等待效果可以通过多种方式完成，以下是几种常见的方法：

使用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();

使用CSS动画创建视觉等待效果

通过CSS动画可以实现视觉上的等待效果，如旋转加载图标。

<div class="loader"></div>
<style>
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

使用第三方库实现复杂等待效果

对于更复杂的等待效果，可以使用第三方库如Spin.js或Loaders.css。

// 使用Spin.js示例
var opts = {
    lines: 12, // 加载线条数
    length: 7, // 线条长度
    width: 5, // 线条宽度
    radius: 10, // 圆半径
    color: '#000', // 颜色
    speed: 1, // 旋转速度
    trail: 60, // 尾部百分比
    shadow: false // 是否显示阴影
};
var target = document.getElementById('loader');
var spinner = new Spinner(opts).spin(target);

使用requestAnimationFrame实现平滑动画

对于需要高性能动画的等待效果，可以使用requestAnimationFrame。

js实现等待效果

function animateLoader(startTime) {
    const duration = 2000; // 动画持续时间2秒
    const progress = (Date.now() - startTime) / duration;

    if (progress < 1) {
        // 更新动画状态
        console.log(`加载进度: ${Math.round(progress * 100)}%`);
        requestAnimationFrame(() => animateLoader(startTime));
    } else {
        console.log("加载完成");
    }
}

animateLoader(Date.now());

以上方法可以根据具体需求选择使用，简单的延迟效果使用setTimeout即可，复杂的异步流程建议使用Promise和async/await，视觉等待效果则可以使用CSS或第三方库实现。