JavaScript计时器秒数补零代码位置问题：为何位置不同效果不同？

我编写了一段JavaScript计时器代码，希望为小于10的秒数添加前导零。当我将补零的if代码块放在else块内的--second语句之前时，代码无法正常工作；但将其移至--second和秒数重置逻辑之后的位置时，功能正常。请问这是什么原因？

原代码如下：

let minute = +prompt("Enter For Min :");
let second = +prompt("Enter For Sec :");

let timer = setInterval(function () {
  if (minute == 0 && second == 0) {
    document.body.innerHTML = `Time Out!`;
    clearInterval(timer);
  } else {
    if (second < 10 && second.toString().indexOf(0) !== 0) {
      second = "0" + second;
    }//This code should paste to line 17 to work but why?
    --second;
    if (second == -1) {
      minute -= 1;
      second = 59;
    }
    //This Place
    document.body.innerHTML = `Timer ${minute} : ${second}`;
  }
}, 1000);

问题根源：数据类型混乱+逻辑顺序颠倒 #

1. 提前补零会破坏数值运算的原始变量 #

补零操作会把数字类型的second转成字符串类型，比如把5变成"05"。后续的--second、second == -1等运算虽然能通过强制类型转换执行，但会出现两个问题：

• 你格式化的是当前未更新的秒数，但马上就执行了减1操作，最终页面显示的是减1后的未格式化数值，补零等于白做；
• 字符串与数字混合运算可能出现隐蔽bug，比如如果某次循环后second是字符串"00"，虽然强制转数字后能正常运算，但这种类型混乱会增加代码的不可预测性。

2. 逻辑顺序搞反了 #

倒计时的正确流程应该是：

先更新倒计时数值（减秒、处理分钟进位）→ 再对更新后的数值做格式化处理 → 最后渲染到页面

你之前把补零放在--second前面，相当于先格式化了旧数值，再更新数值，最后显示的是更新后的未格式化数值，完全违背了正确的流程，自然看不到预期的补零效果。

修正后的代码示例 #

建议单独使用一个变量存储格式化后的秒数，避免修改用于运算的原始数字变量：

let minute = +prompt("Enter For Min :");
let second = +prompt("Enter For Sec :");

let timer = setInterval(function () {
  if (minute == 0 && second == 0) {
    document.body.innerHTML = `Time Out!`;
    clearInterval(timer);
  } else {
    // 第一步：更新倒计时数值
    --second;
    if (second == -1) {
      minute -= 1;
      second = 59;
    }
    // 第二步：格式化显示用的秒数
    let displaySecond = second < 10 ? `0${second}` : second;
    // 第三步：渲染页面
    document.body.innerHTML = `Timer ${minute} : ${displaySecond}`;
  }
}, 1000);

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