js实现delay
在JavaScript中实现延迟执行可以通过多种方式实现,以下是几种常见的方法:
使用setTimeout
setTimeout是JavaScript中用于延迟执行函数的内置方法。它接受一个回调函数和延迟时间(毫秒)作为参数。
setTimeout(() => {
console.log('This message will appear after 2 seconds');
}, 2000);
使用Promise和async/await
通过Promise封装setTimeout,结合async/await语法,可以实现更清晰的延迟逻辑。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedAction() {
console.log('Start');
await delay(3000);
console.log('End after 3 seconds');
}
delayedAction();
使用Generator函数
Generator函数结合yield可以暂停执行,但需要手动控制迭代器。
function* delayedGenerator() {
console.log('First step');
yield new Promise(resolve => setTimeout(resolve, 1000));
console.log('Second step after 1 second');
}
const generator = delayedGenerator();
generator.next().value.then(() => generator.next());
使用requestAnimationFrame
对于需要与浏览器渲染帧同步的延迟,可以使用requestAnimationFrame。

function delayWithRAF(callback, ms) {
const start = performance.now();
function frame(time) {
if (time - start >= ms) {
callback();
} else {
requestAnimationFrame(frame);
}
}
requestAnimationFrame(frame);
}
delayWithRAF(() => console.log('Delayed with RAF'), 2000);
注意事项
setTimeout的延迟时间并非精确,受事件循环影响。- 对于长时间延迟任务,建议使用
Web Workers避免阻塞主线程。 - 在Node.js环境中,
setImmediate或process.nextTick可用于类似场景。
以上方法可根据具体需求选择,Promise方案在现代前端开发中更为常用。






