如何使用Ajax添加多个倒计时计时器？jQuery动态列表项计时实现求助

我懂你的需求：每个新增的列表项都得有自己独立的2小时倒计时，旧项继续走时、新项从2小时重新开始，互不干扰。下面是完整的可运行方案，咱们一步步拆解：

首先是基础HTML结构，简单的输入区和列表容器：

<input type="text" id="itemInput" placeholder="输入名称...">
<button id="addBtn">添加项</button>
<ul id="itemList"></ul>

接下来是核心的jQuery实现，重点保证每个列表项的倒计时独立运行：

$(document).ready(function() {
    // 监听添加按钮点击
    $('#addBtn').click(function() {
        const itemText = $('#itemInput').val().trim();
        if (!itemText) return; // 空内容不添加

        // 创建带倒计时容器的新列表项
        const $li = $('<li><span class="countdown"></span> ' + itemText + '</li>');
        $('#itemList').append($li);

        // 为当前项初始化2小时倒计时（换算成7200秒）
        initCountdown($li.find('.countdown'), 7200);

        // 清空输入框
        $('#itemInput').val('');
    });

    // 支持回车触发添加
    $('#itemInput').keypress(function(e) {
        if (e.which === 13) {
            $('#addBtn').click();
        }
    });
});

// 独立的倒计时初始化函数，每个项单独调用
function initCountdown($countdownEl, totalSeconds) {
    let remainingSeconds = totalSeconds;

    // 先执行一次更新，避免初始显示空白
    updateCountdownDisplay($countdownEl, remainingSeconds);

    // 每秒更新倒计时，把定时器ID存在元素data属性里，方便后续清理
    const timerId = setInterval(function() {
        remainingSeconds--;
        updateCountdownDisplay($countdownEl, remainingSeconds);

        // 时间耗尽时清除定时器并更新显示
        if (remainingSeconds <= 0) {
            clearInterval(timerId);
            $countdownEl.text('已过期');
        }
    }, 1000);

    $countdownEl.data('timerId', timerId);
}

// 格式化倒计时显示的工具函数
function updateCountdownDisplay($el, seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    // 补零处理，让显示统一为两位数字（比如01:05:03）
    $el.text(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
}

关键细节说明： #

• 完全独立的计时逻辑：每个新列表项都会调用initCountdown函数，创建专属的setInterval定时器，剩余时间变量是函数局部变量，不会和其他项冲突。
• 定时器内存管理：把定时器ID存在元素的data属性里，后续如果要删除列表项，可以先清除对应定时器避免内存泄漏。比如加个删除按钮的逻辑：

  // 在创建$li时追加删除按钮
  $li.append('<button class="deleteBtn">删除</button>');
  $li.find('.deleteBtn').click(function() {
      const timerId = $(this).siblings('.countdown').data('timerId');
      clearInterval(timerId);
      $(this).parent().remove();
  });
  

• 美观的显示格式：用padStart(2, '0')让时分秒都显示为两位数字，视觉上更规整。

这样实现后，你输入John添加，他的倒计时从02:00:00开始走；10分钟后输入Pete，Pete的倒计时会从02:00:00重新开始，而John的会显示01:50:00左右，完全独立互不干扰。

内容的提问来源于stack exchange，提问作者TaLeNT_