求助：如何用JavaScript的for循环实现10到0的倒计时并展示到HTML

原代码问题 #

• 手动重复编写setTimeout逻辑冗余，可维护性差
• 直接使用var配合循环编写定时器会遇到闭包问题，回调无法拿到预期的倒计时数值
• 手动维护超时时间变量容易出错

实现代码 #

首先需要在页面中添加用于展示倒计时的元素，示例如下：

<div id="CountDownDisplay"></div>
<button onclick="StartTheCountdown()">启动倒计时</button>

调整后的JS逻辑如下：

function StartTheCountdown() {
  // 循环从10递减到0，覆盖所有倒计时节点
  for (let i = 10; i >= 0; i--) {
    // 计算当前数值的延迟显示时间：10立刻显示，9延迟1秒，以此类推
    const delay = (10 - i) * 1000;
    setTimeout(() => {
      const displayDom = document.getElementById("CountDownDisplay");
      if (i === 0) {
        displayDom.innerText = "Blastoff!";
      } else {
        displayDom.innerText = i;
      }
    }, delay);
  }
}

逻辑说明 #

• 使用let声明循环变量，利用ES6的块级作用域特性，每个循环迭代都会生成独立的变量作用域，定时器回调可以准确拿到当前迭代的倒计时数值，不会出现闭包导致的变量值异常问题
• 延迟时间直接和当前倒计时数值绑定，不需要额外维护超时时间变量，逻辑更简洁不易出错
• 所有逻辑都封装在for循环中，不需要重复编写定时器代码，后续要调整倒计时总时长只需要修改循环的初始值即可

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