如何阻止JavaScript倒计时计时器自动重启

问题描述 #

我正在使用JavaScript开发一款倒计时计时器，遇到了计时器到达00:00:00后自动重启的问题。我最初的实现尝试在计时归零时将计时器显示重置为初始状态，但这反而导致了计时器重启。

原代码如下：

var seconds;
var temp;
var GivenTime = document.getElementById('countdown').innerHTML;

function countdown() {
  time = document.getElementById('countdown').innerHTML;
  timeArray = time.split(':')
  seconds = timeToSeconds(timeArray);
  
  if (seconds == '') {
    temp = document.getElementById('countdown');
    temp.innerHTML = GivenTime;
    time = document.getElementById('countdown').innerHTML;
    timeArray = time.split(':')
    seconds = timeToSeconds(timeArray);
  }
  seconds--;
  temp = document.getElementById('countdown');
  temp.innerHTML= secondsToTime(seconds);
  timeoutMyOswego = setTimeout(countdown, 1000);
}

function timeToSeconds(timeArray) {  
  var minutes = (timeArray[0] * 1);
  var seconds = (minutes * 60) + (timeArray[1] * 1);
  return seconds;
}

function secondsToTime(secs) {
  var hours = Math.floor(secs / (60 * 60));
  hours = hours < 10? '0' + hours : hours;
  var divisor_for_minutes = secs % (60 * 60);
  var minutes = Math.floor(divisor_for_minutes / 60);
  minutes = minutes < 10? '0' + minutes : minutes;
  var divisor_for_seconds = divisor_for_minutes % 60;
  var seconds = Math.ceil(divisor_for_seconds);
  seconds = seconds < 10? '0' + seconds : seconds;
  
  return minutes + ':' + seconds;
}

countdown();

然而，这种方法并未有效解决问题，因为计时器到达00:00:00后仍会继续运行。我尝试通过判断seconds是否为空字符串('')并重置计时器显示为GivenTime来解决，但这似乎反而触发了倒计时重启。

请问有没有人可以建议如何修改我的代码，使倒计时计时器在到达00:00:00后完全停止，不再重启？

解决方案 #

你的代码核心问题有两个：

• 每次调用countdown都会无条件设置新的setTimeout，没有停止逻辑
• 归零判断逻辑错误：你判断seconds == ''，但实际计时器到0时seconds是数值0，这个判断根本不会触发，反而会执行seconds--变成-1，继续递归调用

要实现归零后停止的效果，需要调整逻辑并优化代码结构：

修改后的代码 #

let remainingSeconds;
let timerId;
const givenTime = document.getElementById('countdown').innerHTML;

// 初始化剩余秒数并更新显示
function initCountdown() {
  const timeParts = givenTime.split(':');
  remainingSeconds = timeToSeconds(timeParts);
  updateDisplay(remainingSeconds);
}

function countdown() {
  // 剩余时间小于等于0时，停止计时器
  if (remainingSeconds <= 0) {
    clearTimeout(timerId);
    return;
  }

  remainingSeconds--;
  updateDisplay(remainingSeconds);
  timerId = setTimeout(countdown, 1000);
}

function timeToSeconds(timeParts) {  
  const minutes = parseInt(timeParts[0], 10);
  const seconds = parseInt(timeParts[1], 10);
  return minutes * 60 + seconds;
}

function secondsToTime(secs) {
  const hours = Math.floor(secs / 3600);
  const formattedHours = hours < 10 ? `0${hours}` : hours;
  const remainingAfterHours = secs % 3600;
  const minutes = Math.floor(remainingAfterHours / 60);
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const seconds = remainingAfterHours % 60;
  const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;

  // 有小时则显示完整格式，否则只显示分秒
  return hours > 0 ? `${formattedHours}:${formattedMinutes}:${formattedSeconds}` : `${formattedMinutes}:${formattedSeconds}`;
}

function updateDisplay(secs) {
  document.getElementById('countdown').textContent = secondsToTime(secs);
}

// 启动倒计时
initCountdown();
countdown();

关键改进点 #

• 维护内存中的剩余时间：用remainingSeconds变量存储剩余秒数，避免每次从DOM读取，减少错误
• 添加停止逻辑：在countdown中判断remainingSeconds <= 0时，调用clearTimeout清除计时器并终止函数
• 优化变量规范：使用let/const替代var，变量名采用小驼峰命名，符合现代JavaScript规范
• 修复时间格式化问题：去掉Math.ceil，倒计时应该向下取整，避免最后一秒的跳变
• 拆分逻辑函数：将初始化、显示更新等逻辑拆分到独立函数，代码更易读维护

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