How to make a setInterval() stop using clearInterval() work?

Question

Well, I am trying to make a setInterval() to stop using clearInterval(), here is the code:

let submitBPMkeeper = document.getElementById("submitBPMkeeper");

function startStopBPMkeeper(sr) {
  let bpmKeepTrack = document.getElementById("bpmSet");
  var test1 = 0;
  var t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value);

  function bpmKTcounter() {
    test1 += 1;
    document.getElementById("testInput").innerHTML = test1;
  }
  if (sr == "start") {
    submitBPMkeeper.innerHTML = "Stop";
  } else if (sr == "stop") {
    submitBPMkeeper.innerHTML = "Start";
    clearInterval(t);
  }
}

submitBPMkeeper.addEventListener("click", function() {
  if (submitBPMkeeper.innerHTML == "Start") {
    startStopBPMkeeper("start");
  } else if (submitBPMkeeper.innerHTML == "Stop") {
    startStopBPMkeeper("stop");
  }
});

<div id="bpm">
  <h2>Tempo Keepper:</h2>
  <label for="bpmSet">BPM:</label>
  <input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80">
  <button id="submitBPMkeeper">Start</button>
  <p id="baseInput"></p>
  <p id="testInput"></p>
</div>

As you can see you can't stop the thing from counting up, I would really like it to stop when you press stop.

Possible duplicate of https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — Jijo Cleetus, Nov 16 '21 at 20:25
You create a new interval everytime `startStopBPMkeeper` is called, so the reference `t` from the initial call (which is the timer you actually want to clear) is lost. What actually happens is that on "stop" you start and then immediately clear a new interval - the previous one keeps on going indefinitely. — Đinh Carabus, Nov 16 '21 at 20:26
Create the interval in the same if block you set the button text to "Stop", and pull the `t` declaration outside of the function. — Teemu, Nov 16 '21 at 20:27
Not an answer but you would save yourself some headaches if you don't depend on string comparison, in this case your safe but "start" == "Start" is an easy way to trip yourself up. — Daniel Tate, Nov 16 '21 at 20:35

score 1 · Accepted Answer · answered Nov 16 '21 at 20:35

Just define the interval variable in the upper scope.

const submitBPMkeeper = document.getElementById("submitBPMkeeper");
const bpmKeepTrack = document.getElementById("bpmSet");

let interval = null;

function toggleBPMKeeper() {
  let test1 = 0;

  function bpmKTcounter() {
    test1 += 1;
    document.getElementById("testInput").innerHTML = test1;
  }

  if (interval) {
    clearInterval(interval);
    interval = null;
    submitBPMkeeper.innerHTML = "Start";
  } else {
    interval = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value)
    submitBPMkeeper.innerHTML = "Stop";
  }
}

submitBPMkeeper.onclick = toggleBPMKeeper;

score 0 · Answer 2 · answered Nov 16 '21 at 20:40

Thanks to Teemu's comment, I have fixed my problem:

let submitBPMkeeper = document.getElementById("submitBPMkeeper");
var t;

function startStopBPMkeeper(sr) {
  let bpmKeepTrack = document.getElementById("bpmSet");
  var test1 = 0;

  function bpmKTcounter() {
    test1 += 1;
    document.getElementById("testInput").innerHTML = test1;
  }
  if (sr == "start") {
    submitBPMkeeper.innerHTML = "Stop";
    t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value);
  } else if (sr == "stop") {
    submitBPMkeeper.innerHTML = "Start";
    clearInterval(t);
  }
}

submitBPMkeeper.addEventListener("click", function() {
  if (submitBPMkeeper.innerHTML == "Start") {
    startStopBPMkeeper("start");
  } else if (submitBPMkeeper.innerHTML == "Stop") {
    startStopBPMkeeper("stop");
  }
});

<div id="bpm">
  <h2>Tempo Keepper:</h2>
  <label for="bpmSet">BPM:</label>
  <input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80">
  <button id="submitBPMkeeper">Start</button>
  <p id="baseInput"></p>
  <p id="testInput"></p>
</div>

By creating the interval in the same if block that I set the button text to "Stop", and pull the t declaration outside of the function, I had fixed it so that it works.

How to make a setInterval() stop using clearInterval() work?

2 Answers2