js实现睡眠后执行js
使用setTimeout实现延迟执行
在JavaScript中，可以通过setTimeout函数实现延迟执行代码的效果。setTimeout接受两个参数：要执行的函数和延迟的毫秒数。
setTimeout(() => {
console.log('这段代码将在1秒后执行');
}, 1000);使用Promise和async/await实现睡眠
ES6引入了Promise和async/await语法，可以更优雅地实现睡眠功能。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedExecution() {
console.log('开始');
await sleep(2000); // 等待2秒
console.log('2秒后执行');
}使用requestAnimationFrame实现精确延迟
对于需要与浏览器渲染同步的延迟执行，可以使用requestAnimationFrame。
function delayedAnimation(callback, delay) {
const start = performance.now();
function frame(time) {
if (time - start >= delay) {
callback();
} else {
requestAnimationFrame(frame);
}
}
requestAnimationFrame(frame);
}
delayedAnimation(() => {
console.log('在精确时间后执行');
}, 1000);使用Generator函数实现可中断延迟
Generator函数可以创建可暂停和恢复的执行流程。
function* delayedGenerator(ms) {
yield new Promise(resolve => setTimeout(resolve, ms));
}
const gen = delayedGenerator(1000);
gen.next().value.then(() => {
console.log('1秒后执行');
});使用Web Worker实现后台延迟
对于需要在不阻塞主线程的情况下实现延迟，可以使用Web Worker。
// worker.js
self.onmessage = function(e) {
setTimeout(() => {
postMessage('延迟完成');
}, e.data);
};
// 主线程
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log(e.data);
};
worker.postMessage(1000);使用Atomics.wait实现同步睡眠
在SharedArrayBuffer环境中，可以使用Atomics API实现同步睡眠。
function syncSleep(ms) {
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);
Atomics.wait(sharedArray, 0, 0, ms);
}
console.log('开始');
syncSleep(2000); // 同步等待2秒
console.log('2秒后执行');每种方法适用于不同的场景，setTimeout和Promise适用于大多数异步延迟需求，requestAnimationFrame适合动画相关延迟，Web Worker适合后台任务，而Atomics.wait则适用于特殊的同步等待场景。
