本文教你如何将两个独立的“开始”和“暂停”按钮整合为一个动态切换的按钮，点击时自动在播放（▶）与暂停（⏸）图标间切换，并正确控制计时器启停状态。
实现单按钮切换控制的核心在于引入一个状态标识变量（如 isRunning），用于实时追踪计时器当前是运行中还是已暂停。在此基础上，统一监听该按钮的点击事件，并根据状态执行对应逻辑：若正在运行，则清除定时器、更新状态、切换图标为播放；若已停止，则启动计时器、更新状态、切换图标为暂停。
此外，原代码中使用 var 声明全局变量存在作用域污染和变量提升风险，我们推荐改用 let（块级作用域）以提升代码健壮性。同时，图标切换不再依赖 DOM 重写或 innerHTML 操作，而是通过现代 Web API 的 element.classList.replace() 方法精准替换 Font Awesome 类名，既高效又语义清晰。
以下是完整可运行的优化实现：
<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> <span id="hours">00:</span> <span id="mins">00:</span> <span id="seconds">00</span> <button id="startStop"><i class="fas fa-play" style="color:#000"></i></button>
let hours = 0;
let mins = 0;
let seconds = 0;
let timer = null; // 使用 null 更明确表示“无定时器”
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");
}
});
function startTimer() {
timer = setTimeout(function() {
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);
}✅ 关键注意事项：
- 确保
- timer 初始设为 null，并在 clearTimeout() 前无需判空（clearTimeout(null) 安全无副作用）；
- classList.replace() 要求浏览器支持（现代浏览器均兼容），若需兼容 IE，请改用 className 手动切换；
- 计时逻辑中避免重复操作 DOM —— 所有时间显示均通过 jQuery .text() 统一更新，保持一致性；
- 递归 setTimeout 虽简洁，但长期运行可能存在微小时间漂移；生产环境建议改用 setInterval + clearInterval 并配合时间戳校准。
通过以上改造，你获得了一个语义清晰、状态可控、图标自适应的单按钮计时控制器，兼顾可读性、可维护性与用户体验。
