为什么Javascript clearInterval不能在按钮点击上工作？

我有一个计时器程序，在“开始”按钮点击时从25:00开始倒计时，应该重置，在“重置”按钮点击时

clearInterval（）。当计时器达到0:00时，if语句全部通过，并调用
resetTimer（）
，执行在本例中工作的
clearInterval（）
。简而言之：
clearInterval（）
在if语句通过时起作用，但在我单击“reset”按钮时不起作用。有人能给我解释一下为什么会发生这种情况，并提供一个解决方案吗？谢谢大家!

//My Programs Code:
//Timer Widget
function timerStartReset(event) {
  var minutes;
  var seconds;

  //decrease minutes html every minute
  const minutesInterval = setInterval(() => {
    minutes -= 1;
    timerMinute.innerHTML = minutes;
  }, 60000);

  //decrease seconds html every second
  const secondsInterval = setInterval(() => {
    seconds -= 1;
    timerSeconds.innerHTML = seconds < 10 ? `0${seconds}` : seconds;
    //check if timer reaches 00:00
    if (seconds <= 0) {
      if (minutes <= 0) {
        //stop and reset timer

        //**HERE resetTimer() is called and clearInterval works**

        resetTimer();
        //return start button functionality
        timerStartBtn.disabled = false;
        //add a star
        const addStar = `<i class="fas fa-star h2 mx-2"></i>`;
        timerStarContainer.insertAdjacentHTML("beforeend", addStar);
        localStorage.setItem("timer stars", timerStarContainer.innerHTML);
        setTimeout(breakAlert, 1000);
      }
      seconds = 60;
    }
  }, 1000);

  //start button function
  if (event.target.id === "timer-start") {
    startTimer();
    event.target.disabled = true;
  }
  //reset button function
  else {

    //**HERE resetTimer() is called but clearInterval doesn't work**

    resetTimer();
    timerStartBtn.disabled = false;
  }

  //Reset timer
  function resetTimer() {
    //Reset to starting template
    timerMinute.innerHTML = 25;
    timerSeconds.innerHTML = "00";
    //Clear minute/second timeout function
    clearInterval(minutesInterval);
    clearInterval(secondsInterval);
  }

  //start timer
  function startTimer() {
    //Change starting time and add them to page
    minutes = 0;
    seconds = 1;

    timerMinute.innerHTML = minutes;
    timerSeconds.innerHTML = seconds;

    //start countdown
    minutesInterval;
    secondsInterval;
  }

  //Alert for breaks
  function breakAlert() {
    //If 4 star divs are added dynamically
    if (timerStarContainer.childElementCount >= 4) {
      swal(
        "Great Job! You Did It!",
        "Go ahead and take a 15-30 minute break!",
        "success"
      );
      //remove all stars from DOM
      timerStarContainer.innerHTML = "";
    } else {
      swal("Awesome!", "Please take a 5 minute break!", "success");
    }
  }
}
//End Timer Widget 

//我的程序代码：
//计时器小部件
函数timerStartReset（事件）{
var分钟；
var秒；
//每分钟减少分钟数
常量分钟间隔=设置间隔（（）=>{
分钟-=1；
timerMinute.innerHTML=分钟；
}, 60000);
//每秒钟减少秒数
const secondsInterval=setInterval（（）=>{
秒-=1；
timerSeconds.innerHTML=seconds<10？`0${seconds}`:秒；
//检查计时器是否达到00:00
如果（秒变量
minutesInterval
和
secondsInInterval
是此函数的本地变量。因此，每次调用此函数时，它都会启动新计时器并创建新变量。当代码调用
resetTimer（）时
，它只是重置通过调用
timerStartReset
启动的计时器，而不是之前的计时器

由于倒计时代码在同一范围内，因此它在计时器用完时工作。但当您单击“重置”按钮时，该函数是一个新范围，无法从单击“开始”按钮时访问变量

计时器变量应该是全局变量，可以通过任何调用访问。这样就没有理由对两个按钮使用相同的函数

var minutesInterval;
var secondsInterval;

timerStartBtn.addEventListener('click', timerStart);
timerResetBtn.addEventListener('click', resetTimer);

function timerStart() {
  resetTimer();

  var minutes;
  var seconds;

  //decrease minutes html every minute
  minutesInterval = setInterval(() => {
    minutes -= 1;
    timerMinute.innerHTML = minutes;
  }, 60000);

  //decrease seconds html every second
  secondsInterval = setInterval(() => {
    seconds -= 1;
    timerSeconds.innerHTML = seconds < 10 ? `0${seconds}` : seconds;
    //check if timer reaches 00:00
    if (seconds <= 0) {
      if (minutes <= 0) {
        resetTimer();
        //return start button functionality
        timerStartBtn.disabled = false;
        //add a star
        const addStar = `<i class="fas fa-star h2 mx-2"></i>`;
        timerStarContainer.insertAdjacentHTML("beforeend", addStar);
        localStorage.setItem("timer stars", timerStarContainer.innerHTML);
        setTimeout(breakAlert, 1000);
      }
      seconds = 60;
    }
  }, 1000);

  startTimer();

  //start timer
  function startTimer() {
    //Change starting time and add them to page
    minutes = 0;
    seconds = 1;

    timerMinute.innerHTML = minutes;
    timerSeconds.innerHTML = seconds;

    //start countdown
    minutesInterval;
    secondsInterval;
  }

  //Alert for breaks
  function breakAlert() {
    //If 4 star divs are added dynamically
    if (timerStarContainer.childElementCount >= 4) {
      swal(
        "Great Job! You Did It!",
        "Go ahead and take a 15-30 minute break!",
        "success"
      );
      //remove all stars from DOM
      timerStarContainer.innerHTML = "";
    } else {
      swal("Awesome!", "Please take a 5 minute break!", "success");
    }
  }
}

//Reset timer
function resetTimer() {
  //Reset to starting template
  timerMinute.innerHTML = 25;
  timerSeconds.innerHTML = "00";
  //Clear minute/second timeout function
  clearInterval(minutesInterval);
  clearInterval(secondsInterval);
}

//End Timer Widget

var分钟间隔；
var二级神经；
timerStartBtn.addEventListener（'click'，timerStart'）；
timerResetBtn.addEventListener（'click'，resetTimer'）；
函数timerStart（）{
重置计时器（）；
var分钟；
var秒；
//每分钟减少分钟数
分钟间隔=设置间隔（（）=>{
分钟-=1；
timerMinute.innerHTML=分钟；
}, 60000);
//每秒钟减少秒数
secondsInterval=setInterval（（）=>{
秒-=1；
timerSeconds.innerHTML=seconds<10？`0${seconds}`:秒；
//检查计时器是否达到00:00
如果（秒）您从未在重置按钮上添加
resetTimer
作为单击侦听器。@Barmar我在容器上为两个按钮都有一个单击事件。当event.target.id==”计时器启动时，它指的是启动按钮。否则它指的是重置按钮。我只需控制台.log（“reset”）来确保重置按钮调用resetTimer（）。这就是你所指的还是我仍然没有抓住要点？请发布一个。你可以使用一个使其可执行。@Barmar我更新了问题并尽力省去额外的代码。这对你有用吗？我已经发布了一个答案。