本教程详细介绍了如何使用 javascript 和递归函数实现一系列基于 json 配置的连续倒计时。通过将每个倒计时封装在可递归调用的函数中，并利用 `setinterval` 管理单个计时器的生命周期，我们可以确保计时器按顺序执行，并在所有计时任务完成后触发指定操作，有效解决了传统循环在处理异步任务时的局限性。
在前端开发中，我们经常需要实现各种计时器功能。当需求升级为按顺序执行多个计时器，并且每个计时器的参数（如标题、时长）都由外部数据源（如 JSON 对象数组）动态配置时，传统的 for 或 forEach 循环可能无法直接满足需求，因为计时器本质上是异步操作。本文将深入探讨如何利用 JavaScript 的递归函数结合 setInterval 来优雅地实现这一连续倒计时逻辑。
理解连续倒计时的挑战
设想我们有一个包含多个倒计时任务的 JSON 数组，每个任务定义了其标题和持续时间（小时、分钟、秒）。目标是让这些倒计时任务一个接一个地显示和执行，当前一个倒计时结束后，立即开始下一个，直到所有任务完成。
直接使用 for 或 forEach 循环来启动多个 setInterval 会导致所有计时器几乎同时开始运行，而不是按顺序执行。这是因为 setInterval 是异步的，它会立即返回一个 ID 并继续执行循环中的下一个迭代，而不会等待上一个计时器完成。因此，我们需要一种机制来“等待”当前计时器完成，然后再启动下一个。
核心思路：递归函数与状态管理
解决这个问题的关键在于使用一个递归函数。这个函数负责启动和管理一个单独的倒计时。当当前倒计时结束后，它会检查是否还有下一个倒计时任务，如果有，则再次调用自身来启动下一个任务；如果没有，则表示所有任务已完成。
立即学习“Java免费学习笔记（深入）”；
为了管理倒计时的状态，我们需要以下几个关键变量：
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- curTimer: 当前正在执行的倒计时在任务数组中的索引。
- maxSeconds: 当前倒计时的总秒数。
- thisTimer: 当前正在执行的倒计时的详细数据（从 JSON 数组中获取）。
- interval: setInterval 返回的 ID，用于清除当前的计时器。
- timers: 存储所有倒计时任务的 JSON 数组。
示例数据结构
假设我们的倒计时任务数据如下所示：
[
{
"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。
总结
通过采用递归函数来管理连续的异步操作，我们成功地实现了基于 JSON 配置的连续倒计时功能。这种模式不仅解决了传统循环的局限性，还使得代码结构清晰、易于理解和维护。掌握这种处理异步序列的技巧，对于开发复杂的前端交互功能至关重要。
