js 实现延时执行
使用 setTimeout 实现基础延时执行
setTimeout 是 JavaScript 中最常用的延时执行方法,接受回调函数和毫秒级延迟时间作为参数。示例代码:
setTimeout(() => {
console.log('延时2秒后执行');
}, 2000);
结合 Promise 实现链式调用
通过封装 setTimeout 到 Promise 中,可以实现更优雅的异步流程控制:
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
delay(3000).then(() => {
console.log('延时3秒后执行');
});
使用 async/await 实现同步式写法
在异步函数中结合 await 可以实现类似同步代码的延时效果:
async function delayedAction() {
console.log('开始等待');
await new Promise(resolve => setTimeout(resolve, 1500));
console.log('1.5秒后继续执行');
}
带取消功能的延时执行
通过保存 setTimeout 返回的 timer ID,可以实现延时任务的取消:
const timerId = setTimeout(() => {
console.log('这段代码不会执行');
}, 1000);
clearTimeout(timerId);
循环间隔执行与清除
setInterval 可实现周期性延时执行,需配合 clearInterval 停止:
let counter = 0;
const intervalId = setInterval(() => {
console.log(`第${++counter}次执行`);
if(counter >= 5) clearInterval(intervalId);
}, 1000);
浏览器环境下的 requestAnimationFrame
对于需要与屏幕刷新率同步的延时场景,推荐使用:
function delayedAnimation(callback, delay) {
let start = performance.now();
function frame(time) {
if (time - start >= delay) {
callback();
} else {
requestAnimationFrame(frame);
}
}
requestAnimationFrame(frame);
}
Web Worker 中的延时方案
在 Web Worker 中同样可以使用 setTimeout,但需注意 worker 环境的特殊性:
// worker.js
self.setTimeout(() => {
self.postMessage('延时完成');
}, 500);
Node.js 环境下的定时器扩展
Node.js 除了浏览器相同的定时器 API,还提供了 setImmediate 等特殊方法:
setImmediate(() => {
console.log('在当前事件循环结束后执行');
});






