JavaScript 计数器没有停止

Question

对于我制作的这个计数器，我使用了 setInterval，当每个数字都等于零时，我希望这可以清除间隔，但它不起作用！有人可以帮我吗？

const counterHTML = document.querySelector("#counter");
const timeString = localStorage.getItem("Time");

function timeToAdd(stringTime) {
  const timeArray = stringTime.split(":");
  const hoursInMiliseconds = timeArray[0] * 60 * 60 * 1000;
  const minutesInMiliseconds = timeArray[1] * 60 * 1000;
  const TIME_IN_MILISECONDS = hoursInMiliseconds + minutesInMiliseconds;
  return TIME_IN_MILISECONDS;
}

const actualTime = Date.now();
const finalTimeDateObj = new Date(actualTime + timeToAdd(timeString));
const finalTime = finalTimeDateObj.getTime();

const time = (myTimerInterval) => {
  const timeNow = Date.now();
  const diference = finalTime - timeNow;
  let displayTimeArray = msToTime(diference);
  console.log(diference);
  const hours = String(displayTimeArray[0]).padStart(2, "0");
  const minutes = String(displayTimeArray[1]).padStart(2, "0");
  const seconds = String(displayTimeArray[2]).padStart(2, "0");
  if (hours == "00" && minutes == "00" && seconds == "00") {
    clearInterval(myTimerInterval);
  }
  counterHTML.innerText = `${hours}:${minutes}:${seconds}`;
};

function msToTime(millis) {
  let h, m, s;
  h = Math.floor(millis / 1000 / 60 / 60);
  m = Math.floor((millis / 1000 / 60 / 60 - h) * 60);
  s = Math.floor(((millis / 1000 / 60 / 60 - h) * 60 - m) * 60);
  return [h, m, s];
}

var myTimerInterval = setInterval(time, 1000);

Answer 1

首先我看到这个问题

const time = (myTimerInterval) => { 
   ...
   if (hours == "00" && minutes == "00" && seconds == "00") {
        // myTimerInterval === undefined
        clearInterval(myTimerInterval);
   }
   ...
}

setInterval 调用的函数没有收到任何参数。 myTimerInterval 在这种情况下是未定义的，因此clearInterval 不起作用。

尝试删除该参数

const time = () => { 
   ...
   // now myTimerInterval references the global var
   if (hours == "00" && minutes == "00" && seconds == "00") {
        clearInterval(myTimerInterval);
   }
   ...
}