为什么Javascript代码中该while循环点击按钮后仍无法运行？

• JavaScript是单线程执行，遵循事件循环机制：所有同步代码会优先按顺序执行完毕，才会处理异步任务（比如你绑定的点击事件回调）。
  你的代码中while循环是同步执行的，初始化时run值为false，第一次判断条件不满足，循环直接退出，整个同步代码执行完毕。之后点击按钮修改run值时，已经没有正在运行的while循环会重新判断条件了。
• 退一步说，哪怕你初始把run设为true，这个while循环会直接占满整个主线程，页面会完全卡死，点击事件永远没有触发机会，更不可能修改run的值中断循环。

不能。while是同步阻塞执行的结构：要么循环条件一开始不满足直接退出，后续变量变更不会再触发循环重新执行；要么循环一直运行阻塞主线程，所有事件回调、UI渲染都被挂起，根本没有机会修改对应的变量值。

你可以用setInterval这类异步API实现需求，不会阻塞主线程，示例代码如下：

JS代码 #

let run = false;
let count = 0;
let timer = null;

const button = document.getElementById("startstop");
const counter = document.getElementById("counter");

button.addEventListener('click', function() {
  run = !run;
  if(run) {
    // 启动定时器，每16ms更新一次（约60帧，和浏览器刷新频率对齐）
    timer = setInterval(() => {
      count++;
      counter.innerHTML = count;
    }, 16)
  } else {
    // 停止定时器
    clearInterval(timer);
  }
})

HTML代码（原有逻辑无需修改） #

<button id="startstop">Start/Stop</button>
<p id="counter">0</p>

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