当前位置：首页 > JavaScript

js sleep实现

2026-03-14 15:20:34JavaScript

使用 Promise 和 setTimeout

在 JavaScript 中实现 sleep 功能可以通过 Promise 和 setTimeout 结合实现。这种方式是非阻塞的，适用于异步环境。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 使用示例
async function demo() {
  console.log('开始等待');
  await sleep(2000);
  console.log('等待结束');
}
demo();

使用生成器函数

通过生成器函数和 yield 关键字可以实现类似 sleep 的效果。这种方法需要配合特定的执行器使用。

js sleep实现

function* sleepGenerator(ms) {
  yield new Promise(resolve => setTimeout(resolve, ms));
}

// 使用示例
const gen = sleepGenerator(2000);
gen.next().value.then(() => {
  console.log('等待完成');
});

同步阻塞方式（不推荐）

在浏览器环境中不推荐使用同步阻塞的方式，但在某些 Node.js 环境下可以通过循环实现。

js sleep实现

function sleepSync(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

// 使用示例
console.log('开始阻塞');
sleepSync(2000);
console.log('阻塞结束');

使用 Atomics.wait

在支持 SharedArrayBuffer 的环境中，可以使用 Atomics.wait 实现精确的同步等待。

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

// 使用示例
console.log('原子等待开始');
sleepAtomics(2000);
console.log('原子等待结束');

使用 requestAnimationFrame

对于浏览器动画场景，可以使用 requestAnimationFrame 实现基于帧率的等待。

function sleepAnimationFrame(ms) {
  return new Promise(resolve => {
    const start = performance.now();
    function check(time) {
      if (time - start >= ms) {
        resolve();
      } else {
        requestAnimationFrame(check);
      }
    }
    requestAnimationFrame(check);
  });
}

// 使用示例
async function animate() {
  console.log('动画等待开始');
  await sleepAnimationFrame(2000);
  console.log('动画等待结束');
}
animate();