JavaScript切换两个倒计时时出现重叠问题该如何解决？

问题根源 #

你现在的代码每次调用refillTimer都会生成一个新的setInterval定时器，但定时器ID仅保存在函数内部的局部变量x中，函数执行完毕后就无法获取到之前的定时器ID，无法清除旧定时器。多个定时器同时运行时都会修改同一个#refillTimer元素的内容，就会出现数值来回跳变的问题。

修复方案 #

核心逻辑 #

新增一个全局变量存储当前运行的定时器ID，每次调用refillTimer时先清除旧定时器，再启动新的定时器，保证全局始终只有一个倒计时实例运行。

完整修改后代码 #

// 全局变量存储当前运行的定时器ID
let currentTimer = null;

// COUNTDOWN TIMER
// 参数重命名为endTime避免和函数名冲突
function refillTimer(endTime){
  // 先清除之前运行的定时器
  if (currentTimer) {
    clearInterval(currentTimer);
    currentTimer = null;
  }

  var countDownDate = new Date(endTime).getTime();
  // 把新的定时器ID赋值给全局变量
  currentTimer = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var hours = ("0" + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    var minutes = ("0" + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    var seconds = ("0" + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);
    document.getElementById("refillTimer").innerHTML = hours + ":" + minutes + ":" + seconds;
    if(distance < 0){
      clearInterval(currentTimer);
      currentTimer = null;
      document.getElementById("refillTimer").innerHTML = "00:00:00";
    }
  }, 1000);
}

// ON SWIPE PERFORM ACTION
async function swipeAction(currentElementObj, swipeType) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = {
    card: cardId,
    swipe: swipeType
  };
  // 补全原代码缺失的Promise resolve逻辑，避免函数一直处于等待状态
  let response = await new Promise((resolve, reject) => {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "processes/swipe.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.responseType = "json";
      xhr.send(JSON.stringify(dataString));
      xhr.onreadystatechange = function () {
        let resObj = xhr.response;
        if(xhr.readyState == 4) {
          if(xhr.status == 200 && resObj) {
            if(resObj.action == 'gameover'){
              refillTimer(resObj.nextgameoverTimer);
            }else if(resObj.action == 'killsalloted'){
              refillTimer(resObj.nextkillsallotedTimer);
            }
            resolve(resObj);
          } else {
            reject(new Error('请求失败'));
          }
        }
      };
    }catch(e){
      reject(e.toString());
    }
  });
}

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