当前位置：首页 > JavaScript

js实现睡眠后执行js

2026-01-30 21:24:31JavaScript

使用setTimeout实现延迟执行

在JavaScript中，可以通过setTimeout函数实现延迟执行代码的效果。setTimeout接受两个参数：要执行的函数和延迟的毫秒数。

setTimeout(() => {
  console.log('这段代码将在1秒后执行');
}, 1000);

使用Promise和async/await实现睡眠

ES6引入了Promise和async/await语法，可以更优雅地实现睡眠功能。

js实现睡眠后执行js

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函数可以创建可暂停和恢复的执行流程。

js实现睡眠后执行js

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则适用于特殊的同步等待场景。