单页JQuery多计时器点击触发后同步异常问题求助

问题根源 #

你遇到的冲突核心在于计时器状态（ID、剩余时间）未做隔离，加上DOM操作未精准定位：

• 全局复用计时器变量，新启动的计时器会覆盖旧实例，导致所有赛事共享同一个计时器；
• 剩余时间变量全局化，更新时所有计时器显示同步变化；
• 更新倒计时时用了全局选择器，没有针对当前赛事行的计时器元素。

修复步骤及代码示例 #

1. 调整HTML结构，确保可精准定位 #

给每个赛事行添加统一类名，通过data属性绑定赛事ID，让按钮、计时器与所属行关联：

<table>
  <tr class="event-row" data-event-id="1">
    <td>赛事1</td>
    <td><span class="timer">00:00:00</span></td>
    <td><button class="complete-btn">完成赛事</button></td>
  </tr>
  <tr class="event-row" data-event-id="2">
    <td>赛事2</td>
    <td><span class="timer">00:00:00</span></td>
    <td><button class="complete-btn">完成赛事</button></td>
  </tr>
  <tr class="event-row" data-event-id="3">
    <td>赛事3</td>
    <td><span class="timer">00:00:00</span></td>
    <td><button class="complete-btn">完成赛事</button></td>
  </tr>
</table>

2. 修改jQuery代码，实现计时器完全隔离 #

通过data()方法将计时器ID绑定到当前赛事行，每个计时器维护独立的剩余时间和更新逻辑：

$('.complete-btn').on('click', function() {
  // 精准定位当前赛事行及对应计时器
  const $row = $(this).closest('.event-row');
  const $timer = $row.find('.timer');

  // 避免重复启动同一赛事的计时器
  if ($row.data('timerId')) return;

  // Ajax获取当前赛事的起止时间
  $.ajax({
    url: '/api/get-event-timing', // 替换为实际接口地址
    type: 'POST',
    data: { eventId: $row.data('event-id') },
    success: function(res) {
      // 计算剩余时间（假设接口返回endTime为时间戳或可解析的日期字符串）
      const endTime = new Date(res.endTime).getTime();
      let remainingTime = endTime - new Date().getTime();

      if (remainingTime <= 0) {
        $timer.text('00:00:00');
        return;
      }

      // 启动独立计时器，将ID绑定到当前行
      const timerId = setInterval(() => {
        remainingTime -= 1000;

        if (remainingTime <= 0) {
          clearInterval(timerId);
          $timer.text('00:00:00');
          $row.removeData('timerId');
          return;
        }

        // 格式化时分秒并补零
        const hours = String(Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
        const minutes = String(Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
        const seconds = String(Math.floor((remainingTime % (1000 * 60)) / 1000)).padStart(2, '0');

        // 仅更新当前赛事的计时器显示
        $timer.text(`${hours}:${minutes}:${seconds}`);
      }, 1000);

      $row.data('timerId', timerId);
    },
    error: () => alert('获取赛事时间失败')
  });
});

关键优化点 #

• 精准DOM操作：用closest('.event-row')和find('.timer')确保只操作当前赛事的元素，避免全局影响；
• 状态独立存储：通过$row.data('timerId')存储当前行的计时器ID，防止重复启动，同时每个计时器的remainingTime是局部变量，互不干扰；
• 独立计时器实例：每个赛事启动的setInterval都是单独实例，各自维护自己的倒计时逻辑。

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