如何在JavaScript中实现倒计时结束后暂停3秒再重新启动循环？

嘿，我来帮你搞定这个倒计时的需求！你想要实现从10数到1后，暂停3秒不用刷新页面就自动重新开始，对吧？先看看你现有代码的问题：你在主setInterval里又嵌套了一个setInterval，这会导致每过1秒就多一个定时器，不仅逻辑混乱，还会让页面越来越卡。而且你的代码没有处理“倒计时结束后暂停”的逻辑，而是直接把数值重置回10，完全跳过了暂停的步骤。

下面是修正后的代码，完美实现你的需求：

HTML部分（保留你的结构） #

<div id="countdown">
  <div id="countdown-number"></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>

JavaScript部分 #

// 获取显示倒计时数字的元素
const countdownNumberEl = document.getElementById('countdown-number');
// 初始化倒计时数值
let countdown = 10;
// 用来保存定时器ID，方便后续清除
let timerId = null;

// 页面加载时先显示初始数值
countdownNumberEl.textContent = countdown;

// 定义启动倒计时的函数
function startCountdown() {
  // 每次启动前清除可能存在的旧定时器，避免冲突
  if (timerId) clearTimeout(timerId);

  // 用递归的setTimeout实现精准倒计时
  timerId = setTimeout(function tick() {
    // 倒计时数值减1
    countdown--;
    // 更新页面显示的数字
    countdownNumberEl.textContent = countdown;

    if (countdown > 1) {
      // 还没到1，继续下一秒的倒计时
      timerId = setTimeout(tick, 1000);
    } else if (countdown === 1) {
      // 倒计时到1了，暂停3秒后重置并重新开始
      timerId = setTimeout(() => {
        countdown = 10;
        countdownNumberEl.textContent = countdown;
        startCountdown();
      }, 3000);
    }
  }, 1000);
}

// 启动第一次倒计时
startCountdown();

代码逻辑解释 #

• 用let timerId管理定时器ID，每次启动倒计时前清除旧定时器，防止多个定时器同时运行
• 采用递归的setTimeout代替setInterval，这样能更灵活地控制每一步流程，尤其是暂停环节
• 当倒计时到1时，不再继续递减，而是触发一个3秒的超时定时器，时间到后重置数值为10，再重新启动倒计时

这样修改后，你的倒计时就会按照「10→9→…→1 → 暂停3秒 → 10→9→…→1」的流程循环运行啦！

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