JavaScript多阶段计时器：实现标签切换时计数器重置的技巧

在开发具有多个顺序阶段的计时器应用时，一个常见的需求是让每个阶段的计数器从1开始重新计时。例如，在一个呼吸练习应用中，可能包含“吸气”、“屏息”、“呼气”、“屏息”等多个环节，每个环节都需要独立的计时显示。如果仅使用一个全局计数器，它将持续递增，无法满足每个阶段独立计时的要求。

问题分析

初始的实现尝试通常会使用一个单一的 count 变量来跟踪时间流逝，并根据 count 的值来更新阶段标签。然而，这种方法导致 count 值在整个计时周期内不断增加，而不是在每个阶段开始时重置为1。

// 原始实现片段（存在问题）
var count = 1;
var interval = setInterval(function() {
  timer.textContent = count; // count持续递增
  if (count <= 8) {
    label.textContent = 'Inhale';
  } else if (count <= 16) { // 此时count已大于8，不会从1开始
    label.textContent = 'Pause Inhale';
  }
  count++;
  // ...
}, 1000);

上述代码的问题在于，timer.textContent 直接显示的是全局 count，当进入下一个阶段时，count 的值已经很大，无法实现从1开始计时的效果。

解决方案：引入独立阶段计数器

要解决这个问题，核心思想是区分两个概念：

1. 整体进度计数器 (Overall Progress Counter)：用于跟踪整个计时周期的总时间，决定何时切换阶段标签。
2. 阶段内部计数器 (Segment Counter)：用于显示当前阶段内部的计时，它会在每个新阶段开始时重置。

我们将使用 count 来表示整体进度，而 segcount 来表示当前阶段的内部进度。

立即学习“Java免费学习笔记（深入）”；

实现步骤与代码

1. HTML 结构

首先，我们需要一个简单的HTML结构来显示计时器和当前阶段的标签。

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

这里，timer 段落用于显示数字计时，label 段落用于显示当前的动作标签（如“Inhale”）。

2. CSS 样式

为了让页面居中显示，我们添加一些基本的CSS样式。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

3. JavaScript 逻辑

这是实现核心功能的关键部分。我们将修改 startTimer 函数，引入 segcount 变量，并在适当的时候重置它。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');

  // 初始化第一个阶段的标签
  label.textContent = 'Inhale'; 

  // count 跟踪整个计时周期的总秒数
  var count = 1; 
  // segcount 跟踪当前阶段内部的秒数，会在阶段切换时重置
  var segcount = 1; 

  // Interval for the timer
  var interval = setInterval(function() {
    // 更新计时器显示为当前阶段的计数
    timer.textContent = segcount;

    // 根据整体进度 (count) 判断是否切换阶段标签并重置 segcount
    if (count === 8) { // 8秒吸气结束
      label.textContent = 'Pause Inhale';
      segcount = 0; // 重置segcount，下一秒将变为1
    } else if (count === 16) { // 8秒屏息结束 (总计 8+8=16秒)
      label.textContent = 'Exhale';
      segcount = 0; // 重置segcount
    } else if (count === 28) { // 12秒呼气结束 (总计 16+12=28秒)
      label.textContent = 'Pause Exhale';
      segcount = 0; // 重置segcount
    }
    // 注意：最后一个阶段结束后，segcount 不必重置，因为整个周期即将结束

    // 两个计数器都递增
    count++;
    segcount++;

    // 当整体进度 (count) 达到45时，表示一个完整的呼吸周期（8+8+12+8 = 36秒，
    // 但由于 count 在判断后递增，所以周期结束条件是 36 + 1 = 37，
    // 原始代码中是 45，这里假设原意是 44 秒后停止，所以 45 是停止时的 count 值）
    // 如果是 36秒循环，则应为 count === 37
    // 根据原始代码的逻辑 (8+8+12+8 = 36)，count 会从 1 递增到 36，然后变成 37。
    // 如果要完全匹配原代码的 45，则意味着计时总时长为 44 秒。
    // 这里我们沿用原始的 `count === 45` 作为停止条件。
    if (count === 45) { 
      clearInterval(interval); // 清除当前计时器
      startTimer();            // 重新开始一个新的计时周期
    }
  }, 1000); // 每1000毫秒（1秒）执行一次
}

// Start the timer initially
startTimer();

代码详解

1. 变量初始化:

   • timer 和 label 获取对应的DOM元素。
   • label.textContent = 'Inhale';：在计时器开始时，立即将标签设置为“Inhale”，以便用户知道第一个阶段是什么。
   • count = 1;：count 是一个全局计时器，从1开始，每秒递增一次，用于跟踪整个呼吸周期的总时间。
   • segcount = 1;：segcount 是当前阶段的局部计时器，从1开始，每秒递增一次，用于显示当前阶段的进度。

2. setInterval 逻辑:

   • timer.textContent = segcount;：每次计时器更新时，timer 元素显示的是 segcount 的值，从而实现了每个阶段从1开始计时的效果。
   • 阶段切换条件:
     • if (count === 8)：当 count 达到8时，表示第一个“Inhale”阶段结束。此时，将 label 更新为“Pause Inhale”，并将 segcount 重置为0。为什么是0？因为在 segcount++ 执行后，它会立即变为1，从而在下一个循环周期中显示为1，实现了从1开始计时的效果。
     • else if (count === 16)：当 count 达到16（8秒吸气 + 8秒屏息）时，表示“Pause Inhale”阶段结束，切换到“Exhale”，并重置 segcount。
     • else if (count === 28)：当 count 达到28（16秒 + 12秒呼气）时，表示“Exhale”阶段结束，切换到“Pause Exhale”，并重置 segcount。
   • count++; 和 segcount++;：在每次循环的最后，两个计数器都递增。
   • 周期结束与重启:
     • if (count === 45)：当 count 达到45时，表示一个完整的呼吸周期结束。
     • clearInterval(interval);：停止当前的计时器。
     • startTimer();：重新调用 startTimer() 函数，开始一个新的呼吸周期，从而实现无限循环。

注意事项与最佳实践

• 明确变量职责: count 负责整体流程控制和阶段判断，segcount 负责当前阶段的显示，这种职责分离是解决问题的关键。

• 重置时机: segcount 的重置应发生在阶段切换的条件判断内部，并且重置为0是为了在紧随其后的 segcount++ 操作后，能从1开始显示。

• 可维护性: 对于更复杂的计时器或更多阶段的计时器，可以考虑使用一个数组来存储每个阶段的持续时间及其对应的标签，通过循环遍历数组来管理阶段切换，而不是硬编码多个 if/else if 条件。例如：

  const stages = [
    { label: 'Inhale', duration: 8 },
    { label: 'Pause Inhale', duration: 8 },
    { label: 'Exhale', duration: 12 },
    { label: 'Pause Exhale', duration: 8 }
  ];
  let currentStageIndex = 0;
  let stageStartTime = 0; // 记录当前阶段开始时的总时间
  // ... 在 setInterval 中根据 (count - stageStartTime) 来计算 segcount
  // 并在 (count - stageStartTime) === stages[currentStageIndex].duration 时切换阶段

  登录后复制

  这种方式可以使代码更加灵活和易于扩展。

• 用户体验: 确保计时器显示和标签切换同步，提供清晰的视觉反馈。

总结

通过引入一个专门用于跟踪当前阶段进度的 segcount 变量，并结合一个跟踪整体进度的 count 变量，我们成功解决了多阶段计时器中计数器无法在每个阶段开始时重置的问题。这种分离职责的设计模式不仅适用于呼吸练习，也适用于任何需要分段计时的应用场景，提高了代码的清晰度和功能性。

以上就是JavaScript多阶段计时器：实现标签切换时计数器重置的技巧的详细内容，更多请关注php中文网其它相关文章！