JavaScript实现基于JSON配置的连续倒计时教程-js教程-PHP中文网

JavaScript实现基于JSON配置的连续倒计时教程

本教程详细介绍如何利用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 结构：

音疯

音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。

178

查看详情

<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 : 当当前倒计时完成时，clearInterval 停止当前 setInterval。
递归调用条件 (curTimer :

如果当前倒计时不是数组中的最后一个，curTimer 递增，然后 timer 函数递归调用自身，传入新的 curTimer 值，从而启动下一个倒计时。

这种机制确保了一个倒计时完全结束后，下一个才会被启动。
全部完成 (else): 如果 curTimer 已经指向最后一个倒计时，并且该倒计时也已完成，则表示所有倒计时任务已完成，此时可以执行最终的操作，例如显示 "DONE" 消息或进行页面重定向。

完整代码示例

将上述HTML和JavaScript代码整合到一起，形成一个可直接运行的页面：




    
    
    JSON配置的连续倒计时
    


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