js实现睡眠后执行js
使用 setTimeout 实现延迟执行
通过 setTimeout 可以指定函数在延迟一定时间后执行。延迟时间以毫秒为单位。
setTimeout(() => {
console.log("延迟执行的操作");
}, 1000); // 延迟1秒后执行结合 Promise 和 async/await 实现睡眠
通过 Promise 封装 setTimeout，结合 async/await 语法实现更清晰的异步睡眠逻辑。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedAction() {
console.log("开始等待");
await sleep(2000); // 睡眠2秒
console.log("等待结束，执行后续操作");
}
delayedAction();使用 requestAnimationFrame 实现帧级延迟
适用于需要与浏览器渲染帧同步的场景，例如动画处理。
function sleepByFrame(callback, frames = 1) {
let count = 0;
function checkFrame() {
if (count >= frames) {
callback();
} else {
count++;
requestAnimationFrame(checkFrame);
}
}
requestAnimationFrame(checkFrame);
}
sleepByFrame(() => {
console.log("延迟1帧后执行");
}, 1);使用 Atomics.wait 实现阻塞睡眠（谨慎使用）
Atomics.wait 会阻塞主线程，仅适用于特定场景（如 Web Worker）。
// 仅在支持 SharedArrayBuffer 的环境中使用
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);
function blockingSleep(ms) {
Atomics.wait(sharedArray, 0, 0, ms);
}
console.log("开始阻塞睡眠");
blockingSleep(3000); // 阻塞3秒
console.log("睡眠结束");注意事项
- 避免在主线程中使用阻塞方法（如
Atomics.wait），否则会导致页面无响应。 setTimeout的延迟时间不精确，可能受事件循环影响。async/await是推荐方式，代码可读性更高。
