JavaScript 连续倒计时实现教程-js教程-PHP中文网

JavaScript 连续倒计时实现教程

碧海醫心

发布： 2025-11-21 19:09:01

原创

848人浏览过

JavaScript 连续倒计时实现教程

本教程详细介绍了如何使用 javascript 和递归函数实现一系列基于 json 配置的连续倒计时。通过将每个倒计时封装在可递归调用的函数中，并利用 `setinterval` 管理单个计时器的生命周期，我们可以确保计时器按顺序执行，并在所有计时任务完成后触发指定操作，有效解决了传统循环在处理异步任务时的局限性。

在前端开发中，我们经常需要实现各种计时器功能。当需求升级为按顺序执行多个计时器，并且每个计时器的参数（如标题、时长）都由外部数据源（如 JSON 对象数组）动态配置时，传统的 for 或 forEach 循环可能无法直接满足需求，因为计时器本质上是异步操作。本文将深入探讨如何利用 JavaScript 的递归函数结合 setInterval 来优雅地实现这一连续倒计时逻辑。

理解连续倒计时的挑战

设想我们有一个包含多个倒计时任务的 JSON 数组，每个任务定义了其标题和持续时间（小时、分钟、秒）。目标是让这些倒计时任务一个接一个地显示和执行，当前一个倒计时结束后，立即开始下一个，直到所有任务完成。

直接使用 for 或 forEach 循环来启动多个 setInterval 会导致所有计时器几乎同时开始运行，而不是按顺序执行。这是因为 setInterval 是异步的，它会立即返回一个 ID 并继续执行循环中的下一个迭代，而不会等待上一个计时器完成。因此，我们需要一种机制来“等待”当前计时器完成，然后再启动下一个。

核心思路：递归函数与状态管理

解决这个问题的关键在于使用一个递归函数。这个函数负责启动和管理一个单独的倒计时。当当前倒计时结束后，它会检查是否还有下一个倒计时任务，如果有，则再次调用自身来启动下一个任务；如果没有，则表示所有任务已完成。

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

为了管理倒计时的状态，我们需要以下几个关键变量：

curTimer: 当前正在执行的倒计时在任务数组中的索引。
maxSeconds: 当前倒计时的总秒数。
thisTimer: 当前正在执行的倒计时的详细数据（从 JSON 数组中获取）。
interval: setInterval 返回的 ID，用于清除当前的计时器。
timers: 存储所有倒计时任务的 JSON 数组。

示例数据结构

假设我们的倒计时任务数据如下所示：

AssemblyAI

转录和理解语音的AI模型

查看详情

[
    {
        "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"
    }
]

登录后复制

每个对象包含一个唯一的 id、一个 title 和倒计时的 hour、minute、second。

实现步骤与代码解析

1. HTML 结构

首先，在 HTML 页面中创建一个用于显示倒计时信息的容器。

<div class="output"></div>

登录后复制

2. JavaScript 初始化

const output = document.querySelector(".output"); // 获取输出容器
let interval; // 用于存储 setInterval 的 ID
let curTimer = 0; // 当前计时器的索引，从 0 开始
let maxSeconds = 0; // 当前计时器的总秒数
let thisTimer; // 当前计时器的数据对象

// 倒计时任务数据
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"
  }
];

登录后复制

3. 显示时间函数

一个简单的函数，负责将当前剩余秒数和计时器标题更新到页面上。

const displayTime = () => {
  output.innerHTML = `${maxSeconds} timer ${thisTimer.title}`;
};

登录后复制

4. 核心递归计时器函数

这是实现连续倒计时的核心逻辑。

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://example.com/done";
      }
    }
  }, 1000); // 每 1000 毫秒（1秒）执行一次
};

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

登录后复制

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 连续倒计时</title>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f4f4f4; }
        .output { font-size: 2em; font-weight: bold; color: #333; padding: 20px; border: 2px solid #ccc; border-radius: 8px; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <div class="output"></div>

    <script>
        const output = document.querySelector(".output");
        let interval;
        let curTimer = 0;
        let maxSeconds = 0;
        let thisTimer;

        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 = () => {
          output.innerHTML = `${maxSeconds} timer ${thisTimer.title}`;
        };

        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);
    </script>
</body>
</html>

登录后复制

注意事项与扩展

错误处理: 在实际应用中，应对 parseInt 可能返回 NaN 的情况进行处理，确保小时、分钟、秒都是有效的数字。
用户体验: 可以添加暂停、恢复、跳过等功能，通过额外的按钮和逻辑来控制 clearInterval 和 setInterval 的调用。

显示格式: 当前 displayTime 只是简单地显示总秒数。可以进一步格式化为 HH:MM:SS 的形式，例如：

const formatTime = (seconds) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    return [h, m, s].map(v => v < 10 ? "0" + v : v).join(":");
};
const displayTime = () => {
  output.innerHTML = `${formatTime(maxSeconds)} timer ${thisTimer.title}`;
};

登录后复制

完成回调: 除了直接修改 output.innerHTML 为 "DONE" 或重定向，可以设计一个回调函数，当所有计时器完成后执行。这使得逻辑更加灵活。
内存管理: 确保在不再需要计时器时，始终调用 clearInterval 来防止内存泄漏。本实现中，每个计时器结束时都会清除其对应的 interval。