循环内setTimeout函数无法执行，求JavaScript倒计时实现方案

原代码的核心问题 #

1. 同步循环瞬间调度所有定时器：while是同步执行语句，会一次性创建全部setTimeout任务，不会等待前一个定时器执行完成。当定时器触发时，循环早已把i减到0，导致所有回调都显示0。
2. 闭包共享变量引用：箭头函数捕获的是i的引用而非循环时的快照值，所有定时器回调最终都会使用循环结束后的i值（0）。
3. 延迟时间逻辑完全颠倒：初始timeout=10000，每次减1000会让后续定时器等待时间更短，执行顺序彻底混乱（比如9秒的定时器会比10秒的先执行）。

推荐修复方案（循环版，贴合同步思维） #

用async/await配合Promise化的延迟函数，让循环按顺序执行，每次等待1秒后再更新数值，更符合你从C#带来的同步逻辑习惯：

// 封装setTimeout为Promise，方便用await调用
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function startCountdown() {
  let i = 10;
  const counterElement = document.getElementById("counter");
  
  while (i > 0) {
    counterElement.innerHTML = i;
    await delay(1000); // 等待1秒后执行下一次循环
    i--;
  }
  
  // 倒计时结束提示
  counterElement.innerHTML = "时间到！";
}

// 启动倒计时
startCountdown();

备选方案（同步创建定时器，修正闭包与延迟） #

如果不想用async/await，可以用立即执行函数捕获每次循环的i值，同时计算正确的延迟时间：

let i = 10;
const counterElement = document.getElementById("counter");

while (i > 0) {
  // 用立即执行函数保存当前循环的i值
  (function(currentNumber) {
    setTimeout(() => {
      counterElement.innerHTML = currentNumber;
    }, 1000 * (10 - currentNumber + 1)); // 计算正确延迟：1秒后显示10，2秒后显示9...
  })(i);
  i--;
}

// 倒计时结束后更新内容
setTimeout(() => {
  counterElement.innerHTML = "时间到！";
}, 11000);

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