1. 引言：分段计时器的挑战
在Web开发中，我们经常需要创建具有特定时间序列和阶段转换的用户界面。一个典型的例子是呼吸练习应用，它要求用户按照“吸气”、“屏息”、“呼气”等阶段进行操作，并且每个阶段都有其独立的计时。核心挑战在于，当阶段转换时，计时器需要从1重新开始计数，而不是持续累加。
考虑一个简单的呼吸练习计时器，其阶段定义如下：
- 吸气：8秒
- 屏息（吸气后）：8秒
- 呼气：12秒
- 屏息（呼气后）：8秒
如果使用一个单一的计数器来跟踪整个过程，那么当阶段标签改变时，计数器会继续累加，无法满足“每个阶段都从1开始计数”的需求。
2. 问题分析：单一计数器的局限性
让我们先看看一个常见但存在问题的实现方式：
立即学习“Java免费学习笔记（深入）”；
// 原始的计时器函数 (存在问题)
function startTimerProblematic() {
var timer = document.getElementById('timer');
var label = document.getElementById('label');
var count = 1; // 单一计数器
var interval = setInterval(function() {
timer.textContent = count; // 直接显示全局计数
if (count <= 8) {
label.textContent = 'Inhale';
} else if (count <= 16) {
label.textContent = 'Pause Inhale';
} else if (count <= 28) {
label.textContent = 'Exhale';
} else if (count <= 36) { // 假设总时长为36秒
label.textContent = 'Pause Exhale';
}
count++;
// 假设在36秒后重新开始 (原代码为45)
if (count > 36) {
clearInterval(interval);
startTimerProblematic();
}
}, 1000);
}
// startTimerProblematic(); // 运行此函数将看到问题上述代码中，count 变量从1开始持续递增。当 label 从“Inhale”变为“Pause Inhale”时（即 count 从8变为9），显示在 timer 上的数字会从8直接变为9，而不是重新从1开始计数。这显然不符合分段计时的要求。
3. 解决方案：分段计数器与阶段管理
要解决这个问题，我们需要引入一个额外的计数器，专门用于跟踪当前阶段的进度，并在阶段转换时将其重置。更进一步，我们可以采用一种结构化的方法来管理所有阶段及其属性。
3.1 核心思路：双计数器与阶段配置
- 全局计数器 (可选，或通过阶段索引隐式管理)：跟踪整个计时周期的总进度。
- 分段计数器 (segmentCounter)：跟踪当前活跃阶段的内部进度，每次阶段转换时重置为1。
- 阶段配置 (Phases Array)：使用一个数组来定义每个阶段的名称和持续时间，提高代码的可读性和可维护性。
3.2 优化实现：基于阶段数组的方案
我们将定义一个 phases 数组，其中包含每个呼吸阶段的 label（标签）和 duration（持续时间）。通过维护 currentPhaseIndex（当前阶段索引）和 segmentCounter（分段计数器），我们可以精确控制计时器的行为。
// JavaScript 代码
function startBreathingTimer() {
const timerDisplay = document.getElementById('timer');
const labelDisplay = document.getElementById('label');
// 定义呼吸练习的各个阶段及其持续时间
const phases = [
{ label: '吸气', duration: 8 },
{ label: '屏息 (吸气后)', duration: 8 },
{ label: '呼气', duration: 1 
