Javascript setInterval 闪烁

如何解决Javascript setInterval 闪烁

我正在尝试使用 JavaScript 创建一个国际象棋时钟。除了这个，我已经解决了时钟功能的几乎所有问题。我正在使用 setInterval 在每个玩家的时钟上创建“倒计时”效果。但是，当它使用我当前使用的方法触发时，时钟会闪烁。根据我的理解/研究，这可能是因为存在重叠的“间隔”导致代码尝试同时显示多个间隔。基本上时钟按钮（stopclock 和 stopclock2）在点击时调用我代码底部的函数。任何人都可以对我的代码（如下）提供一些输入以及为什么会发生这种情况？

clear1mils = "";
clear2mils = "";


//Clock Functions
function countdownmils2() {
  document.getElementById("milsvalue2").innerHTML = --mil2;
   if (mil2 == 0) {
    mil2 = mil2 + 59;
     if (sec2 == 0) {
      if (min2 == 0) {
        clearInterval(clear2mils);
        document.getElementById("milsvalue2").innerHTML = "00";
          }else if (min2 !== 0) {
            sec2 = 60;
            document.getElementById("minutesvalue2").innerHTML = --min2;
            document.getElementById("secondsvalue2").innerHTML = --sec2;
            }
     }else if (sec2 !== 0) {
      document.getElementById("secondsvalue2").innerHTML = --sec2;
      if (sec2 <= 10) {
        document.getElementById("secondsvalue2").innerHTML = "0" + sec2;
      }
     }
    }else if (mil2 <= 10) {
      document.getElementById("milsvalue2").innerHTML = "0" + mil2;
     }
    }

function countdownmils() {
  document.getElementById("milsvalue").innerHTML = --mil;
  if (mil == 0) {
    mil = mil + 59;
     if (sec == 0) {
      if (min == 0) {
        clearInterval(clear1mils);
        document.getElementById("milsvalue").innerHTML = "00";
       }else if (min !== 0) {
         sec = 60;
         document.getElementById("minutesvalue").innerHTML = --min;
         document.getElementById("secondsvalue").innerHTML = --sec;
        }
     }else if (sec !== 0) {
       document.getElementById("secondsvalue").innerHTML = --sec;
       if (sec <= 10) {
        document.getElementById("secondsvalue").innerHTML = "0" + sec;
       }
     }
  }else if (mil <= 10) {
    document.getElementById("milsvalue").innerHTML = "0" + mil;
  }
}


//Clock 1
document.querySelector("#stopclock").addEventListener("click",() => {
  clear2mils = setInterval(countdownmils2,10);
  clearInterval(clear1mils);
  document.getElementById("stopclock").innerHTML = "DOWN";
  document.getElementById("stopclock2").innerHTML = "UP";
  document.getElementById("stopclock").setAttribute("disabled","true");
  document.getElementById("stopclock2").removeAttribute("disabled","true");
});

//Clock 2
document.querySelector("#stopclock2").addEventListener("click",() => {
  clear1mils = setInterval(countdownmils,10);
  clearInterval(clear2mils);
  document.getElementById("stopclock2").innerHTML = "DOWN";
  document.getElementById("stopclock").innerHTML = "UP";
  document.getElementById("stopclock2").setAttribute("disabled","true");
  document.getElementById("stopclock").removeAttribute("disabled","true");
});