使用JavaScript实现基于JSON配置的连续计时器

本教程详细介绍了如何利用JavaScript创建一个连续的倒计时系统，该系统能够根据JSON数据源动态配置多个计时器，并依次显示。文章重点阐述了为何应采用递归函数而非传统的循环结构来处理异步操作序列，并提供了完整的代码示例，指导读者实现从数据解析到界面更新，直至所有计时器完成后的最终状态处理。

在前端开发中，我们经常会遇到需要展示一系列按顺序执行的计时器或倒计时的场景。例如，一个活动页面可能需要依次展示多个不同阶段的倒计时，或者一个学习平台需要顺序完成多个限时任务。本教程将指导您如何使用JavaScript实现一个可配置的、连续执行的倒计时系统，其配置数据来源于一个JSON对象数组。

挑战：连续倒计时与异步操作

一个常见的误区是尝试使用简单的 for 循环来创建连续的倒计时。然而，JavaScript中的 setInterval 是一个异步函数。这意味着 for 循环会立即执行完毕，并在极短的时间内安排所有计时器的 setInterval 回调，导致它们几乎同时开始倒计时，而不是按顺序一个接一个地执行。

要实现真正的连续倒计时，我们需要一种机制来等待当前计时器完成后，再启动下一个计时器。解决这个问题的关键在于利用递归函数来管理计时器的序列。

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

核心实现思路

我们将使用一个递归函数来处理计时器数组。每次函数被调用时，它会启动一个计时器。当当前计时器完成时，它会检查数组中是否还有下一个计时器。如果有，它会递增索引并再次调用自身，从而形成一个连续的执行链。

准备工作：HTML结构与JSON数据

首先，我们需要一个简单的HTML元素来显示倒计时信息，以及一个JSON数组来定义我们的计时器。

HTML 结构

这个 div 元素将用于显示当前的倒计时时间及标题。

JSON 配置数据

我们的计时器数据将以JSON数组的形式存在，每个对象包含 id、title、hour、minute 和 second 属性。

TeemIp - IPAM and DDI solution

TeemIp是一个免费、开源、基于WEB的IP地址管理（IPAM）工具，提供全面的IP管理功能。它允许您管理IPv4、IPv6和DNS空间：跟踪用户请求，发现和分配IP，管理您的IP计划、子网空间、区域和DNS记录，符合最佳的DDI实践。同时，TeemIp的配置管理数据库（CMDB）允许您管理您的IT库存并将您的配置项（CIs）与它们使用的IP关联起来。项目源代码位于https://github.com/TeemIP

下载

const timers = [
    {
        "id": "1",
        "title": "countdown 1",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "2",
        "title": "countdown 2",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "3",
        "title": "countdown 3",
        "hour": "0",
        "minute": "0",
        "second": "4"
    }
];

这里，每个计时器被设置为4秒，方便测试。在实际应用中，您可以根据需要设置不同的时间。

JavaScript 实现

我们将定义几个全局变量来管理计时器的状态，以及两个主要函数：一个用于显示时间，另一个用于核心的计时器逻辑。

const output = document.querySelector(".output"); // 获取显示输出的DOM元素
let interval; // 用于存储setInterval的ID，以便后续清除
let curTimer = 0; // 当前正在执行的计时器的索引
let maxSeconds = 0; // 当前计时器的总秒数
let thisTimer; // 当前计时器的JSON数据对象

// 计时器配置数据
const timers = [
    {
        "id": "1",
        "title": "countdown 1",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "2",
        "title": "countdown 2",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "3",
        "title": "countdown 3",
        "hour": "0",
        "minute": "0",
        "second": "4"
    }
];

/**
 * 更新页面上显示的倒计时信息。
 */
const displayTime = () => {
  // 格式化显示剩余秒数和计时器标题
  const hours = Math.floor(maxSeconds / 3600);
  const minutes = Math.floor((maxSeconds % 3600) / 60);
  const seconds = maxSeconds % 60;

  const formattedTime = [hours, minutes, seconds]
    .map(unit => String(unit).padStart(2, '0')) // 确保两位数显示
    .join(':');

  output.innerHTML = `${formattedTime} - ${thisTimer.title}`;
};

/**
 * 核心计时器函数，以递归方式处理计时器序列。
 * @param {Array} timersArray - 包含所有计时器配置的数组。
 * @param {number} currentIndex - 当前要启动的计时器的索引。
 */
const timer = (timersArray, currentIndex) => {
  // 获取当前计时器的配置数据
  thisTimer = timersArray[currentIndex];

  // 计算当前计时器的总秒数
  maxSeconds = (parseInt(thisTimer.hour) * 3600) + 
               (parseInt(thisTimer.minute) * 60) + 
               parseInt(thisTimer.second);

  // 启动计时器
  interval = setInterval(() => {
    displayTime(); // 更新显示
    maxSeconds--; // 剩余秒数递减

    // 当计时器完成时
    if (maxSeconds < 0) {
      clearInterval(interval); // 清除当前计时器

      // 检查是否还有下一个计时器
      if (curTimer < timersArray.length - 1) {
        curTimer++; // 移动到下一个计时器索引
        timer(timersArray, curTimer); // 递归调用自身，启动下一个计时器
      } else {
        // 所有计时器都已完成
        output.innerHTML = "DONE - 所有倒计时完成！";
        // 在这里可以添加页面重定向逻辑，例如：
        // window.location.href = "https://your-redirect-url.com";
      }
    }
  }, 1000); // 每秒执行一次
};

// 启动第一个计时器
timer(timers, curTimer);

代码解析

1. 全局变量:

   • output: 引用显示倒计时内容的DOM元素。
   • interval: 存储 setInterval 返回的ID，用于在计时结束时清除它。
   • curTimer: 当前正在处理的计时器在 timers 数组中的索引。
   • maxSeconds: 当前计时器剩余的总秒数。
   • thisTimer: 当前计时器的详细配置对象。
   • timers: 包含所有计时器配置的JSON数组。

2. displayTime() 函数:

   • 负责将 maxSeconds 格式化为 HH:MM:SS 格式，并结合 thisTimer.title 更新到 output 元素中。
   • 使用 padStart(2, '0') 确保小时、分钟和秒数始终以两位数显示，提升可读性。

3. timer(timersArray, currentIndex) 函数:

   • 这是实现连续倒计时的核心递归函数。
   • 初始化: 根据 currentIndex 从 timersArray 中获取当前计时器的配置 (thisTimer)，并将其小时、分钟、秒转换为总秒数 (maxSeconds)。
   • setInterval: 每秒执行一次回调函数。
     • 在回调中，调用 displayTime() 更新显示。
     • maxSeconds 递减。
     • 结束判断: 当 maxSeconds 小于0时，表示当前计时器已完成。
       • clearInterval(interval): 停止当前的 setInterval。
       • 递归调用: 检查 curTimer 是否小于 timersArray.length - 1。如果是，说明还有下一个计时器待执行。此时，curTimer 递增，并递归调用 timer(timersArray, curTimer)，启动下一个计时器。
       • 全部完成: 如果 curTimer 已经等于 timersArray.length - 1，则表示所有计时器都已完成。此时，更新 output 为 "DONE"，并可以在此处添加页面重定向逻辑。

4. 启动:

   • 最后一行 timer(timers, curTimer); 是程序的入口点，它会启动第一个计时器。

注意事项与扩展

• 错误处理: 在实际应用中，您可能需要添加对JSON数据格式的验证，例如检查 hour、minute、second 是否为有效的数字。
• 用户界面: 本教程仅提供了最基本的文本输出。您可以结合CSS和更复杂的HTML结构来创建更美观的倒计时界面，例如使用独立的元素显示小时、分钟、秒。
• 重定向: 在所有计时器完成后，如果需要自动跳转到其他页面，可以在 else 分支中添加 window.location.href = "https://your-redirect-url.com";。
• 暂停/恢复功能: 如果需要实现暂停和恢复功能，可以引入一个状态变量（例如 isPaused），并在 setInterval 的回调中根据该变量决定是否递减 maxSeconds。
• 使用Promise/Async-Await: 对于更复杂的异步操作链，或者当每个计时器完成后还需要执行其他异步任务时，可以考虑使用 Promise 或 async/await 来管理序列，这会使代码结构更清晰。

总结

通过本教程，我们学习了如何利用JavaScript的递归函数和 setInterval 来构建一个基于JSON配置的连续倒计时系统。这种方法有效地解决了异步操作序列化的问题，使得多个计时器能够按预设顺序依次执行。掌握这种模式对于处理前端中涉及连续异步任务的场景非常有用。