js之sleep

同步

const sleepSync = (time) => {
  // 🔒 故意卡 time 毫秒
  // 这段代码一刻不停地占着主线程，浏览器既做不了布局，也画不了像素，更响应不了用户输入
  // 整整 time 毫秒页面处于“卡死”状态。
  const dead = performance.now();
  while (performance.now() - dead < time) {}
};

使用

const main = () => {
  console.log("hello");
  sleepSync(3000); // 3 秒白屏+卡死
  console.log("world");
};

main();

异步

const sleepAsync = (time) => {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
};

使用

const main = async () => {
  console.log('hello');
  await sleepAsync(3000); // 这 3 秒页面正常交互
  console.log('world');
  
};
main();

区别

sleepSync 卡住整个浏览器线程，3 秒里页面完全冻住；
sleepAsync 把线程让出来，3 秒里浏览器可以继续布局、绘制、响应用户事件，时间到了再回来执行后续代码。

维度	sleepSync	sleepAsync
是否阻塞主线程	✅ 是，JS 事件循环卡死	❌ 否，事件循环继续转
期间能否渲染/重绘	❌ 不能	✅ 可以
期间能否响应点击、滚动	❌ 不能	✅ 可以
返回值	无（undefined）	Promise，需 await/then
使用场景	仅教学演示，禁止生产	日常异步等待、节流、动画间隔等