如何修复实现秒表功能的函数？当前计时器直接跳至30秒

问题根源 #

• 同步while循环阻塞线程：while是同步执行逻辑，会在瞬间把milsec和sec累加至30秒，完全不会等待setTimeout的延迟。同时循环内不断调用timer()，会触发同步递归，直接撑爆调用栈导致页面崩溃。
• setTimeout使用错误：setTimeout(timer(), 10)是直接执行timer函数而非传递函数引用，导致timer立即递归调用，引发栈溢出。
• 变量未初始化：代码中end、sec、milsec未声明初始化，可能因undefined导致判断逻辑异常。

修复后的代码 #

// 初始化计时变量
let end = 0;
let sec = 0;
let milsec = 0;

timer();

function timer() {
  // 先判断终止条件，不满足则退出
  if (end !== 0 || sec >= 30) {
    return;
  }

  milsec++;
  if (milsec === 100) {
    sec++;
    milsec = 0;
    // 这里可添加DOM更新逻辑，比如把时间显示到页面
    console.log(`${sec}秒 ${milsec}毫秒`);
  }

  // 传递函数引用，实现10毫秒延迟后递归调用
  setTimeout(timer, 10);
}

优化封装版本（避免全局变量污染） #

(function() {
  let end = 0;
  let sec = 0;
  let milsec = 0;

  function timer() {
    if (end !== 0 || sec >= 30) return;

    milsec++;
    if (milsec === 100) {
      sec++;
      milsec = 0;
      console.log(`${sec}秒 ${milsec}毫秒`);
    }

    setTimeout(timer, 10);
  }

  timer();
})();

修复说明 #

1. 移除同步while循环，改用递归+setTimeout的异步逻辑，确保每次计时更新都有10毫秒延迟。
2. 修正setTimeout的调用方式，传递函数本身而非执行结果，让延迟生效。
3. 初始化计时变量，避免undefined引发的逻辑错误。

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