如何在JavaScript中为阻塞代码实现sleep函数？

要实现你需要的同步阻塞sleep函数，让代码执行到该函数时暂停指定毫秒数，同时打印提示信息，之后继续执行后续代码，以下是两种可行方案：

方案一：基于时间循环的兼容实现 #

这是最通用的实现方式，无需特殊环境支持，通过循环检查时间差来阻塞线程：

function sleep(ms) {
  console.log('waiting two seconds...');
  const startTime = Date.now();
  // 循环阻塞直到达到指定毫秒数
  while (Date.now() - startTime < ms) {}
}

// 测试代码（注意修正了原代码中的笔误`slepp`为`sleep`）
console.log(123);
sleep(2000);
console.log(456);

说明 #

该函数通过持续对比当前时间与函数启动时的时间差，直到差值达到传入的毫秒数，期间会阻塞整个JavaScript线程，因此后续代码会在阻塞结束后才执行。

方案二：基于Atomics的高效实现 #

这种方式不会占用CPU空转，性能更优，但需要支持SharedArrayBuffer的环境（浏览器中需满足同源策略或配置跨域头）：

function sleep(ms) {
  console.log('waiting two seconds...');
  const sharedBuffer = new SharedArrayBuffer(4);
  const int32Arr = new Int32Array(sharedBuffer);
  // 让线程休眠指定毫秒数
  Atomics.wait(int32Arr, 0, 0, ms);
}

// 测试代码
console.log(123);
sleep(2000);
console.log(456);

说明 #

Atomics.wait会让当前线程进入休眠状态，直到超时或被唤醒，相比空循环不会浪费CPU资源，但使用场景有一定限制。

注意事项 #

• 同步阻塞的sleep函数会阻塞整个JavaScript线程：在浏览器中会导致页面无法响应用户交互，在Node.js中会阻塞事件循环，仅适合非交互场景使用。
• 原代码中的函数名slepp是笔误，正确应为sleep。

内容的提问来源于stack exchange，提问作者vikoala