点击按钮停止递归函数Timeout？JS时钟格式切换冲突问题

你遇到的问题核心是：两个计时函数里的t1、t2都是局部变量，切换时无法访问并清除另一个正在运行的定时器，导致两个计时逻辑同时更新DOM，时间就会在两种格式间反复跳。

优化方案思路 #

1. 用一个全局变量存储当前的定时器ID，切换时先清除旧定时器再启动新的
2. 抽离时间格式化逻辑，避免重复写两套几乎一样的代码
3. 用一个状态变量记录当前是12小时制还是24小时制，单按钮切换状态

完整代码实现 #

HTML部分

<div id="time"></div>
<button id="toggleFormat">切换12/24小时制</button>

JavaScript部分

// 全局变量：存储当前定时器ID、记录当前时间模式
let timerId = null;
let is24Hour = false;

// 抽离时间格式化逻辑，根据模式返回对应格式的时间字符串
function formatTime(date, is24Hour) {
  let hh = date.getHours();
  const mm = String(date.getMinutes()).padStart(2, '0');
  const ss = String(date.getSeconds()).padStart(2, '0');
  let session = 'AM';

  if (!is24Hour) {
    // 12小时制逻辑
    if (hh === 0) {
      hh = 12;
    } else if (hh > 12) {
      hh = hh - 12;
      session = 'PM';
    }
    hh = String(hh).padStart(2, '0');
    return `${hh}.${mm}.${ss} ${session}`;
  } else {
    // 24小时制逻辑
    hh = String(hh).padStart(2, '0');
    // 24小时制可按需保留/移除AM/PM标识，这里沿用你的原有逻辑
    if (hh > 12) session = 'PM';
    return `${hh}.${mm}.${ss} ${session}`;
  }
}

// 统一的时钟更新函数
function updateClock() {
  const date = new Date();
  const timeStr = formatTime(date, is24Hour);
  document.getElementById('time').innerHTML = timeStr;
  // 保存定时器ID，方便后续清除
  timerId = setTimeout(updateClock, 1000);
}

// 切换按钮事件监听
document.getElementById('toggleFormat').addEventListener('click', () => {
  // 先清除当前运行的定时器
  if (timerId) clearTimeout(timerId);
  // 切换时间模式
  is24Hour = !is24Hour;
  // 启动新的计时
  updateClock();
});

// 页面加载时默认启动12小时制时钟
updateClock();

关键改进点说明 #

• 全局定时器ID：timerId作为全局变量，每次切换时都能通过clearTimeout(timerId)终止上一个计时逻辑，彻底避免两个定时器同时运行
• 格式化逻辑抽离：把12/24小时制的格式化逻辑整合到同一个函数，通过is24Hour参数控制，减少重复代码，后续修改格式更便捷
• 单按钮切换：通过切换is24Hour状态变量，实现一键切换两种模式，无需多个按钮

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