如何在倒计时循环中实现暂停功能？

你给出的示例代码用了同步阻塞的sleep函数，这种写法会直接卡住浏览器主线程，期间没法响应任何用户操作，自然也就实现不了暂停功能。要做可暂停的倒计时，得用异步非阻塞的定时器方案，核心是用状态变量控制定时器的启停，下面是具体实现：

完整实现代码 #

HTML部分 #

<label id="timerLabel">10</label>
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>

JavaScript部分 #

// 全局变量保存定时器ID和剩余时间
let timerInterval;
let remainingTime = 10;

// 获取页面元素
const timerLabel = document.getElementById('timerLabel');
const pauseBtn = document.getElementById('pauseBtn');
const resumeBtn = document.getElementById('resumeBtn');

// 启动倒计时的核心函数
function startTimer() {
  // 每秒更新一次剩余时间
  timerInterval = setInterval(() => {
    remainingTime--;
    timerLabel.textContent = remainingTime;
    
    // 倒计时结束时自动停止
    if (remainingTime <= 0) {
      clearInterval(timerInterval);
      timerLabel.textContent = '倒计时结束';
    }
  }, 1000);
}

// 暂停按钮逻辑：清除定时器
pauseBtn.addEventListener('click', () => {
  clearInterval(timerInterval);
  // 清空定时器ID，避免重复启动时判断出错
  timerInterval = null;
});

// 继续按钮逻辑：重新启动定时器
resumeBtn.addEventListener('click', () => {
  // 只有当定时器未运行且还有剩余时间时才启动
  if (!timerInterval && remainingTime > 0) {
    startTimer();
  }
});

// 页面加载完成后自动启动倒计时
startTimer();

关键说明 #

• 用remainingTime保存当前剩余时间，暂停后再继续时能从暂停的位置接着走，不会重置
• timerInterval用来存储定时器的唯一ID，通过clearInterval可以精准停止定时器
• 异步定时器不会阻塞主线程，浏览器能正常响应暂停/继续的点击操作
• 加入了重复启动的判断，避免多次点击继续按钮导致倒计时加速

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