Javascript - Interval not clearing

Question

I'm making a game that has a timer in it.

What I'm trying to do is -- when the game starts via gameState.init(), the timer starts through timer.counter("start") -- but when the "restart" button is clicked, the timer stops and resets through timer.counter("reset").

The timer does reset back to 0, but it keeps counting and not getting cleared.

Appreciate any insight I can get. Thanks in advance!

var gameState = {
    init: function(){
        var difficultyLevel = document.querySelector('input[name="level"]:checked').value;
        conditions.difficulty(difficultyLevel);
        startFrame.classList.remove("active");
        shuffleCards();
        timer.counter("start");
        display.moves(movesAllowed);
    },
    restart: function(){
        startFrame.classList.add("active");
        reset.allCards(cards);
        shuffleCards();
        timer.counter("reset");
        matchCount = 0;
        totalMoves = 0;
        movesAllowed = 0;
        timeAllowed = 0;
        time = 0;
    }
}

var timer = {
    counter: function(status){
        var clock = document.querySelector(".timer");

        var incrementTime = setInterval(function(){
                time++;
                var minutes = Math.floor(time / 60);
                var seconds = Math.floor(time % 60);
                if(seconds < 10){
                    clock.innerText = minutes + ":0" + seconds;
                } else {
                    clock.innerText = minutes + ":" + seconds;
                }
            }, 1000);

        var stopTime = function(){
            clearInterval(incrementTime);
        }

        if(status === "start"){
            alert("counting");
        }

        if(status === "reset"){;
            alert("reset");
            stopTime();
        }
    }
}

Answer 1

Two issues:

• The variable that holds the interval, incrementTime, is local to the counter function. Once the counter function ends, incrementTime gets garbage collected, because no reference to the interval remains anymore. You need the interval variable to be persistent instead.

• You're setting a new interval every time counter is called. You should probably only set an interval when status is start, otherwise the old interval will continue running and won't be stoppable (reassigning the interval a setInterval is assigned to doesn't clear the interval):

  let interval; // <---- Persistent
  var timer = {
    counter: function(status){
      var clock = document.querySelector(".timer");
      if (status === 'start') {
        interval = setInterval(() => { // <---- Assign to persistent variable
          time++;
          var minutes = Math.floor(time / 60);
          var seconds = Math.floor(time % 60);
          if(seconds < 10){
            clock.innerText = minutes + ":0" + seconds;
          } else {
            clock.innerText = minutes + ":" + seconds;
          }
        }, 1000);
        alert("counting");
      } else if(status === "reset"){
        var stopTime = function(){
          clearInterval(interval); // <---- Clear persistent variable
        }
        alert("reset");
        stopTime();
      }
    }
  }
  

(It would also be a bit more elegant for the stopTime and interval functions to be persistent, rather than being re-created every time they're needed; eg, you might assign them to properties of timer)