如何在单页中运行多个具有不同时间戳的 jQuery 定时器？

2024-03-16 11:50:00

## 单页中运行具有独立时间戳的多个 jQuery 定时器

问题

在一个页面上存在多个定时器，每个定时器都对应着一个不同的比赛。当比赛结束时，这些定时器开始计时。当用户点击“完成比赛”按钮时，比赛状态会变为“完成”，并且根据从 Ajax 请求中接收的开始时间和结束时间启动定时器。问题在于，当一个比赛完成时，第一个定时器运行良好，但第二个、第三个等定时器应该基于它们自己的定时器运行，因为它们的时间段不同。但目前，所有定时器都与第一个定时器相同。

解决方案

解决此问题的关键在于为每个定时器维护独立的状态和变量。以下是如何实现这一目标的步骤：

创建计时器对象： 为每个定时器创建一个对象，该对象将包含其状态、变量和方法。
初始化计时器： 在页面加载时，遍历所有计时器元素并为每个元素创建一个计时器对象，初始化其属性。
处理点击事件： 当用户点击“完成比赛”按钮时，获取相关比赛的计时器对象并将其状态更改为“活动”。
启动计时器： 如果计时器处于“活动”状态，则从服务器请求开始时间和结束时间，并使用这些信息启动计时器。
更新计时器： 使用 setInterval() 函数以定期间隔更新计时器的显示。
停止计时器： 当计时器达到结束时间时，将其状态更改为“完成”并停止更新其显示。

代码示例

以下是一个使用 jQuery 实现此解决方案的代码示例：

$(function() {
  // 计时器对象
  var timers = {};

  // 初始化计时器
  $('.multi-match-timer').each(function() {
    var id = $(this).children('input[name=matchRowID]').val();
    timers[id] = {
      state: 'idle',
      startTime: null,
      endTime: null,
      interval: null
    };
  });

  // 处理点击事件
  $('.complete-match-btn').click(function() {
    var id = $(this).closest('.match-row-info').find('input[name=matchRowID]').val();
    timers[id].state = 'active';
    startTimer(id);
  });

  // 启动计时器
  function startTimer(id) {
    var timer = timers[id];

    // 获取开始时间和结束时间
    $.ajax({
      url: '/get-match-times',
      data: { id: id },
      success: function(data) {
        timer.startTime = data.startTime;
        timer.endTime = data.endTime;

        // 使用开始时间和结束时间启动计时器
        timer.interval = setInterval(function() { updateTimer(id); }, 1000);
      }
    });
  }

  // 更新计时器
  function updateTimer(id) {
    var timer = timers[id];

    // 计算剩余时间
    var remaining = timer.endTime - new Date().getTime();

    // 转换剩余时间为时、分、秒格式
    var hours = Math.floor(remaining / (1000 * 60 * 60));
    var minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((remaining % (1000 * 60)) / 1000);

    // 更新计时器显示
    $('#match-row-info-' + id + ' .match-timer').text(hours + ':' + minutes + ':' + seconds);

    // 如果时间到，则停止计时器
    if (remaining <= 0) {
      clearInterval(timer.interval);
      timer.state = 'completed';
    }
  }
});