本教程详细介绍如何利用javascript实现一系列基于json数据配置的连续倒计时功能。针对传统循环无法有效管理多个顺序执行倒计时的挑战，文章核心阐述了通过递归函数优雅地处理每个倒计时的启动、运行与结束，并在所有倒计时完成后执行指定操作的实现策略，确保倒计时按序无缝衔接。
在前端开发中，我们经常需要实现倒计时功能。当需求升级为根据一组预定义数据（例如JSON对象数组）依次执行多个倒计时，并在全部完成后触发特定动作时，简单的 for 循环或 forEach 循环往往无法直接满足要求。这是因为倒计时通常涉及 setInterval，它是一个异步操作，循环会立即启动所有倒计时，导致它们并行运行而非顺序执行。为了解决这一问题，我们需要一种机制来确保一个倒计时完成后，才启动下一个。
核心策略：递归函数
解决连续倒计时问题的关键在于利用递归函数。递归函数能够在一个倒计时完成后，根据条件判断是否启动下一个倒计时，从而实现串行执行。这种方法避免了传统循环的并行执行问题，使得每个倒计时都能独立且按序完成。
实现步骤
首先，我们定义倒计时的数据结构，并准备基本的HTML元素来显示倒计时。
1. 数据结构与HTML骨架
倒计时数据将以JSON数组的形式提供，每个对象包含 id、title、hour、minute 和 second 等属性。
立即学习“Java免费学习笔记（深入）”；
JSON 数据示例：
[
{
"id": "1",
"title": "任务一",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "2",
"title": "任务二",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "3",
"title": "任务三",
"hour": "0",
"minute": "0",
"second": "4"
}
]HTML 结构：
<div class="output"></div>
一个简单的 div 元素足以作为倒计时信息的显示容器。
2. 初始化变量
在JavaScript中，我们需要定义一些全局变量来管理倒计时的状态：
- output: 用于显示倒计时信息的DOM元素。
- interval: setInterval 的ID，用于清除当前的倒计时。
- curTimer: 当前正在执行的倒计时在 timers 数组中的索引。
- maxSeconds: 当前倒计时的总秒数。
- thisTimer: 当前正在执行的倒计时的数据对象。
- timers: 包含所有倒计时数据的JSON数组。
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"
}
];3. 显示倒计时信息
创建一个辅助函数 displayTime 来更新 output 元素的内容，显示当前的剩余秒数和倒计时标题。
const displayTime = () => {
output.innerHTML = `${maxSeconds} timer ${thisTimer.title}`;
};4. 核心逻辑：timer 递归函数
这是实现连续倒计时的核心。timer 函数接收两个参数：timers 数组和 inc（当前倒计时的索引）。
const timer = (timers, inc) => {
// 1. 获取当前倒计时的数据
thisTimer = timers[inc];
// 2. 计算当前倒计时的总秒数
maxSeconds = (parseInt(thisTimer.hour) * 3600) +
(parseInt(thisTimer.minute) * 60) +
parseInt(thisTimer.second);
// 3. 启动倒计时
interval = setInterval(() => {
displayTime(); // 更新显示
maxSeconds--; // 秒数递减
// 4. 判断当前倒计时是否结束
if (maxSeconds < 0) {
clearInterval(interval); // 清除当前倒计时
// 5. 判断是否还有下一个倒计时
if (curTimer < timers.length - 1) {
curTimer++; // 移动到下一个倒计时
timer(timers, curTimer); // 递归调用自身，启动下一个倒计时
} else {
// 6. 所有倒计时完成
output.innerHTML = "所有倒计时完成！"; // 可以替换为重定向或其他完成操作
// window.location.href = "your_redirect_url.html"; // 示例重定向
}
}
}, 1000); // 每秒执行一次
};
// 首次调用，启动第一个倒计时
timer(timers, curTimer);关键点解析：
- maxSeconds 计算: 将小时、分钟和秒转换为总秒数。
- setInterval: 每秒执行一次 displayTime 和 maxSeconds--。
- 结束判断 (maxSeconds < 0): 当当前倒计时完成时，clearInterval 停止当前 setInterval。
-
递归调用条件 (curTimer < timers.length - 1):
- 如果当前倒计时不是数组中的最后一个，curTimer 递增，然后 timer 函数递归调用自身，传入新的 curTimer 值，从而启动下一个倒计时。
- 这种机制确保了一个倒计时完全结束后，下一个才会被启动。
- 全部完成 (else): 如果 curTimer 已经指向最后一个倒计时，并且该倒计时也已完成，则表示所有倒计时任务已完成，此时可以执行最终的操作，例如显示 "DONE" 消息或进行页面重定向。
完整代码示例
将上述HTML和JavaScript代码整合到一起，形成一个可直接运行的页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON配置的连续倒计时</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.output {
font-size: 2em;
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);
text-align: center;
}
</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": "任务一",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "2",
"title": "任务二",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "3",
"title": "任务三",
"hour": "0",
"minute": "0",
"second": "4"
}
];
// 辅助函数：格式化 
