JavaScript定时器代码触发无限while循环致浏览器崩溃问题求助

1. JavaScript 采用单线程事件循环机制，同步任务的执行优先级高于所有异步任务，setInterval的回调属于异步宏任务，必须等当前所有同步代码执行完毕后才会被调用。
2. 你代码中的while循环是同步阻塞逻辑，只要循环条件成立就会一直占用线程，secondsPassed += 1的回调逻辑永远没有执行机会，secondsPassed始终保持初始值0，while (secondsPassed <= 5)的条件永远成立，直接进入死循环。
3. 死循环运行过程中，每一轮循环都会创建新的setInterval实例，短时间内会生成大量计时器任务，最终导致浏览器资源耗尽崩溃。
4. 额外逻辑缺陷：每次按键触发onkeyup都会调用setTimer，即使没有死循环问题，也会生成大量重复计时器，导致计数混乱。

核心思路是去掉同步阻塞的while循环，改为在计时器回调中判断是否达到停止条件，同时增加计时器防重复逻辑：

方案1：首次输入启动计时器，计数到5秒后自动停止，停止前输入不会重置计数 #

var secondsPassed = 0;
var timer = null; // 存储计时器ID，用于后续清理

function setTimer() {
  // 已有计时器运行时直接返回，避免重复创建
  if (timer) return;
  // 输出初始值0
  console.log(secondsPassed);
  timer = setInterval(() => {
    secondsPassed += 1;
    console.log(secondsPassed);
    // 计数到5秒后清除计时器停止运行
    if (secondsPassed >= 5) {
      clearInterval(timer);
      timer = null;
      // 若需要下次输入重新计数，可放开下面注释
      // secondsPassed = 0;
    }
  }, 1000);
}

HTML部分无需修改，保持原有逻辑即可：

<input type="text" onkeyup="setTimer()">

方案2：每次输入都重置计时器，从0开始重新计数 #

如果需求是每次键入内容都重新启动5秒计时，可使用如下实现：

var timer = null;

function setTimer() {
  // 每次输入先清空之前的计时器，重置计数
  clearInterval(timer);
  let secondsPassed = 0;
  console.log(secondsPassed);
  timer = setInterval(() => {
    secondsPassed += 1;
    console.log(secondsPassed);
    if (secondsPassed >= 5) {
      clearInterval(timer);
    }
  }, 1000);
}

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