当前位置：首页 > JavaScript

js实现睡眠后执行js

2026-04-04 13:13:54JavaScript

使用 `setTimeout` 实现延迟执行

通过 setTimeout 可以在指定的时间后执行代码。第一个参数是回调函数，第二个参数是延迟的毫秒数。

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

使用 `Promise` 和 `async/await` 实现睡眠

通过 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 秒后执行');
}

delayedExecution();

使用 `requestAnimationFrame` 实现帧延迟

如果需要与浏览器的渲染帧同步，可以使用 requestAnimationFrame 实现延迟执行。

function sleepFrames(frames) {
  let count = 0;
  return new Promise(resolve => {
    function loop() {
      if (++count >= frames) {
        resolve();
      } else {
        requestAnimationFrame(loop);
      }
    }
    requestAnimationFrame(loop);
  });
}

async function delayedFrameExecution() {
  console.log('开始执行');
  await sleepFrames(60); // 暂停约 1 秒（假设 60 FPS）
  console.log('1 秒后执行');
}

delayedFrameExecution();

使用 `Atomics.wait` 实现高精度睡眠

Atomics.wait 可以在共享内存中实现高精度的睡眠，但需要注意浏览器兼容性和使用场景。

js实现睡眠后执行js

function highPrecisionSleep(ms) {
  const sharedArray = new SharedArrayBuffer(4);
  const sharedView = new Int32Array(sharedArray);
  Atomics.wait(sharedView, 0, 0, ms);
}

console.log('开始执行');
highPrecisionSleep(1000); // 暂停 1 秒
console.log('1 秒后执行');