本文教你如何将独立的“开始”和“暂停”按钮合并为一个智能切换按钮，通过状态标志控制计时器启停，并动态切换 font awesome 图标（fa-play ↔ fa-pause），同时修复原代码中 `var` 作用域、全局变量污染及递归 `settimeout` 潜在内存泄漏等问题。
实现单按钮切换功能的核心在于状态管理与DOM 动态更新。我们不再依赖两个独立按钮，而是使用一个布尔变量 isRunning 作为运行状态标志，并在每次点击时根据该状态决定启动或停止定时器，同时实时更新图标类名。
✅ 关键改进点说明
- 状态驱动逻辑：引入 let isRunning = false 精确跟踪计时器当前是否激活；
- 安全的图标切换：使用现代 DOM API element.classList.replace(oldClass, newClass) 替代手动字符串操作，避免 class 冗余或丢失；
- 变量声明升级：全部改用 let（而非 var），确保块级作用域，防止意外全局污染；
- 定时器引用统一管理：用单一 let timer 存储 setTimeout 返回值，便于可靠清除；
- HTML 结构精简：仅保留一个
? 完整可运行代码示例
00: 00: 00
// 初始化计时器变量（使用 let 保证块级作用域）
let hours = 0;
let mins = 0;
let seconds = 0;
let timer = null; // 存储 setTimeout ID，用于 clearTimeout
let isRunning = false; // 核心状态标志
// 获取按钮并绑定点击事件
const startStopBtn = document.getElementById('startStop');
startStopBtn.addEventListener('click', function () {
if (isRunning) {
// 当前正在运行 → 停止计时器
clearTimeout(timer);
isRunning = false;
// 切换图标为播放
startStopBtn.querySelector('i').classList.replace('fa-pause', 'fa-play');
} else {
// 当前已暂停 → 启动计时器
startTimer();
isRunning = true;
// 切换图标为暂停
startStopBtn.querySelector('i').classList.replace('fa-play', 'fa-pause');
}
});
// 计时器主函数（注意：此处使用递归 setTimeout，适合教学；生产环境推荐 setInterval + 清理）
function startTimer() {
timer = setTimeout(() => {
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}`);
// 递归调用继续计时
startTimer();
}, 1000);
}⚠️ 注意事项与最佳实践
- 避免递归 setTimeout 的潜在风险：本例为简化演示采用递归调用 startTimer()，但在长时间运行场景中可能导致调用栈堆积。更健壮的做法是改用 setInterval 并在暂停时调用 clearInterval；
- 图标类名必须准确匹配：确保初始 HTML 中 标签包含 fa-play，且未额外添加 fa-pause，否则 replace() 可能失败；
- jQuery 与原生 JS 混用建议：文中保留 $('#hours') 是为兼容原有写法，但推荐逐步迁移至原生 document.getElementById().textContent = ... 提升性能与可维护性；
- 重置功能扩展提示：如需添加“重置”功能，可在按钮旁增加 ，并在其事件中重置所有变量并调用 clearTimeout(timer)，再还原图标为 fa-play。
通过以上改造，你将获得一个语义清晰、状态可控、视觉反馈明确的单按钮计时器控件——既符合现代 Web 开发规范，也具备良好的可读性与可扩展性。
