JavaScript实现点击控制计时器Start/Pause与时间格式化功能

原有代码问题 #

• 所有计时变量定义在setInterval回调内部，每次触发回调都会重置为0，无法累计时间
• 未存储定时器ID，暂停时无法清除运行中的计时任务，易出现多定时器叠加计时的bug
• 时间进位逻辑错误，未做分、秒满60进位的计算
• 未持久化存储暂停时的累计时长，重启计时会从头开始
• 控制台输出存在拼写错误：concole应为console

完整实现代码 #

首先在start、pauseTimer方法的同级作用域/组件实例上声明核心状态变量，不要放在定时器回调内部：

// 累计总秒数，断点续计的核心存储值
let elapsedSeconds = 0;
// 存储定时器ID，用于暂停时清除计时任务
let timerInterval = null;

start方法实现 #

start(){
  // 避免重复点击启动，导致多个定时器同时运行
  if (timerInterval) return;

  timerInterval = setInterval(() => {
    // 每秒累计时长+1，不做重置
    elapsedSeconds++;

    // 基于总累计秒数计算当前时、分、秒
    const hours = Math.floor(elapsedSeconds / 3600);
    const minutes = Math.floor((elapsedSeconds % 3600) / 60);
    const seconds = elapsedSeconds % 60;

    // 补0工具：不足两位的数字前补0，保证显示格式统一
    const padZero = num => num.toString().padStart(2, '0');

    // 按时长自动切换显示格式
    let displayTime;
    if (elapsedSeconds >= 3600) {
      // 累计满1小时，切换为HH:MM:SS格式
      displayTime = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
    } else {
      // 不满1小时，保持MM:SS格式
      displayTime = `${padZero(minutes)}:${padZero(seconds)}`;
    }

    // 此处可替换为页面DOM渲染逻辑，示例为控制台输出
    console.log(displayTime);
  }, 1000)
}

pauseTimer方法实现 #

pauseTimer(){
  // 清除正在运行的定时器，停止计时
  if (timerInterval) {
    clearInterval(timerInterval);
    // 清空定时器标记，下次启动可正常创建新计时任务
    timerInterval = null;
  }
  // 注意：不要重置elapsedSeconds的值，保留当前累计时长，下次启动直接续计
}

关键逻辑说明 #

• 断点续计：累计总秒数elapsedSeconds存在定时器外部作用域，暂停时仅停止计时任务、不清空累计值，下次启动直接在原有数值上累加，实现从暂停节点继续计时的效果
• 自动格式切换：直接判断累计总秒数是否达到3600秒（即1小时），达到则拼接小时展示位，否则仅展示分、秒，所有数值统一补前导0，保证显示为两位数字格式
• 防重复触发：启动前先校验是否已有运行中的计时任务，若存在则直接返回，避免连续点击启动导致多定时器叠加、计时速度异常的问题
• 若后续需要重置功能，可新增reset方法，将elapsedSeconds重置为0、清除定时器即可，当前需求无重置要求无需实现

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