本文介绍如何将独立的“开始”和“暂停”按钮合并为一个可状态切换的按钮，通过布尔标志控制计时器启停，并动态切换 font awesome 图标（fa-play ↔ fa-pause），同时修复原代码中 `settimeout` 递归调用导致的定时器失控、变量作用域及 dom 更新逻辑问题。
实现单按钮切换功能的核心在于状态管理与图标动态更新。我们不再依赖两个分离的按钮，而是使用一个 <button id="startStop">，其内部图标根据计时器当前运行状态实时切换：运行中显示 fa-pause，暂停时显示 fa-play。
✅ 关键改进点
- 引入状态标志：新增 let isRunning = false 变量作为开关，避免重复启动或无效暂停；
- 统一事件监听：仅对 #startStop 绑定一次点击事件，内部通过 if (isRunning) 分支处理启停逻辑；
- 安全切换图标：使用 element.classList.replace(oldClass, newClass) 精准替换 Font Awesome 图标类，避免手动操作 innerHTML 或冗余 DOM 查询；
- 修正定时器机制：将 timex 改为 timer 并声明为 let，确保作用域清晰；取消递归 startTimer() 调用，改用 setInterval 更合理（后文优化说明）；
- 变量声明升级：全部使用 let 替代 var，消除变量提升与全局污染风险。
?️ 优化后的完整代码
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="timer-display"> <span id="hours">00:</span> <span id="mins">00:</span> <span id="seconds">00</span> </div> <button id="startStop"> <i class="fas fa-play" style="color:#000;"></i> </button>
let hours = 0;
let mins = 0;
let seconds = 0;
let timerId = null; // 存储 setInterval ID，便于清除
let isRunning = false;
const startStopBtn = document.getElementById('startStop');
const icon = startStopBtn.querySelector('i');
// 点击切换逻辑
startStopBtn.addEventListener('click', function () {
if (isRunning) {
// 暂停：清除定时器，更新状态与图标
clearInterval(timerId);
isRunning = false;
icon.classList.replace('fa-pause', 'fa-play');
} else {
// 启动：设置定时器，更新状态与图标
timerId = setInterval(() => {
seconds++;
if (seconds > 59) {
seconds = 0;
mins++;
if (mins > 59) {
mins = 0;
hours++;
}
}
// 格式化显示（补零）
$('#hours').text(hours < 10 ? '0' + hours + ':' : hours + ':');
$('#mins').text(mins < 10 ? '0' + mins + ':' : mins + ':');
$('#seconds').text(seconds < 10 ? '0' + seconds : seconds);
}, 1000);
isRunning = true;
icon.classList.replace('fa-play', 'fa-pause');
}
});⚠️ 注意事项与最佳实践
- 避免 setTimeout 递归调用：原文 startTimer() 内部再次调用自身形成无限递归链，易造成内存泄漏与定时器失控。setInterval 是更自然、可控的周期性任务方案；
- 图标替换需确保类存在：.replace() 要求原类名必须已存在，因此初始 HTML 中必须写 fa-play，首次点击才可成功替换为 fa-pause；
- jQuery 与原生 JS 混用建议：本例保留 jQuery 用于文本更新（简洁），但事件绑定与 DOM 操作推荐优先使用原生 API（如 addEventListener, classList），减少依赖；
- 重置功能可扩展：如需添加“重置”按钮，只需清空 hours/mins/seconds、调用 clearInterval(timerId)、重置 isRunning 并还原图标即可；
- 样式增强提示：可通过添加 CSS 类（如 .playing { opacity: 0.8; }）进一步强化按钮状态反馈。
通过以上重构，你获得了一个健壮、可维护、符合现代前端规范的单按钮计时器控件——简洁、直观，且具备明确的状态语义。
