localhost网页while循环超时退出问题：无法跳出循环

兄弟，你这是踩了JavaScript单线程事件循环的典型坑啊！JS是单线程跑代码的，同步代码会霸占执行栈不放，而按钮点击、定时器回调这些事件全排在事件队列里，得等当前执行栈空了才会被处理。

你的while循环是同步阻塞代码，一旦启动就死磕执行栈，完全不给事件队列里的东西留机会——用来判断135秒到点的定时器根本触发不了，额外按钮的点击事件也永远不会被响应，循环自然卡得死死的，根本退不出去，"test2"当然打不出来。

两种靠谱的解决方案 #

方案1：用setInterval模拟非阻塞循环 #

把同步while改成定期检查的setInterval，这样浏览器能腾出手处理其他事件：

<button id="startBtn">启动循环</button>
<button id="extraBtn">额外点击</button>

<script>
let intervalId;
let startTime;
let extraClicked = false;

document.getElementById('startBtn').addEventListener('click', () => {
  console.log('test1');
  startTime = Date.now();
  // 每100ms检查一次退出条件，频率可以自己调
  intervalId = setInterval(() => {
    const elapsedTime = (Date.now() - startTime) / 1000;
    // 满足135秒或额外点击就退出
    if (elapsedTime >= 135 || extraClicked) {
      clearInterval(intervalId);
      console.log('test2');
    }
    // 这里放你循环里要执行的逻辑
  }, 100);
});

document.getElementById('extraBtn').addEventListener('click', () => {
  extraClicked = true;
});
</script>

方案2：用async/await写异步循环（更贴近原写法） #

这种方式看起来和while循环差不多，但通过Promise让出执行栈，不会阻塞：

<button id="startBtn">启动循环</button>
<button id="extraBtn">额外点击</button>

<script>
let extraClicked = false;

// 封装一个小函数，用来让出执行栈
function waitForEventLoop(ms = 50) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

document.getElementById('startBtn').addEventListener('click', async () => {
  console.log('test1');
  const startTime = Date.now();
  
  while (true) {
    // 每次循环都给浏览器留时间处理其他事件
    await waitForEventLoop();
    
    const elapsedTime = (Date.now() - startTime) / 1000;
    if (elapsedTime >= 135 || extraClicked) {
      break;
    }
    // 这里放循环内的逻辑
  }
  
  console.log('test2');
});

document.getElementById('extraBtn').addEventListener('click', () => {
  extraClicked = true;
});
</script>

核心要点 #

不管用哪种方案，核心都是别让同步代码霸占执行栈，得给事件循环留机会处理按钮点击、定时器这些事件。你可以根据自己的需求调整检查间隔——间隔越小，循环响应越及时，但也会多耗点性能，找个平衡就行。

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