Using clearInterval in a variable

Question

I am creating a simple JavaScript Timer. Firstly, here's my code that I'm working with:

//Variables used for the timer
var timer = "waiting",
    seconds = 0,
    minutes = 0,
    extraFill1 = "",
    extraFill2 = "";

//Check whether to start or stop the timer
function toggleClock() {
    if (timer === "waiting") {
        setInterval(start, 1000);
        timer = "executing";
        document.getElementById("btn").innerText = "Stop";
    }
    else {
        clearInterval(start);
        timer = "waiting";
        document.getElementById("btn").innerText = "Start";
    }   
}

//Increment seconds and display correctly
function start() {
    seconds++;

    //Add a leading zero for 1 digit numbers (seconds)
    if (seconds < 10 || seconds === 60) {
        extraFill1 = "0";
    }
    else {
        extraFill1 = "";
    }

    //Increment minute when seconds reaches 60
    if (seconds === 60) {
        minutes += 1;
        seconds = 0;
    }

    //Add a leading zero for 1 digit numbers (minutes)
    if (minutes < 10) {
        extraFill2 = "0";
    }
    else {
        extraFill2 = "";
    }

    //display results
    document.getElementById("result").innerHTML = extraFill2 + minutes + ":" + extraFill1 + seconds;
}

In my first function toggleClock(), I have stated that if timer !== waiting, then we do clearInterval(start). I would like to clearInterval(start) if timer === "executing. This does not work (which I think is because it has a local scope?). To solve this, I attempted writing:

var myTimer = setInterval(start, 1000);

I planned on calling myTimer when I wanted to start the timer. Instead, the interval kicks off as soon as the page is loaded (and the variable is declared).

How might I set an interval of a function (on button click) with the ability to stop/clear the interval (by pressing the same button) later?

`clearInterval` expects to be passed the **ID** of the interval you want to stop, not a function. Please read the docs: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval — Felix Kling, Jun 01 '18 at 00:10

score 1 · Accepted Answer · answered Jun 01 '18 at 00:09

1

You need to pass to clearInterval the result of your call to setInterval earlier; you don't pass a function to clearInterval, you pass it the intervalID. For example:

let clockInterval;
function toggleClock() {
  if (timer === "waiting") {
    clockInterval = setInterval(start, 1000);
    timer = "executing";
    document.getElementById("btn").innerText = "Stop";
  }
  else {
    clearInterval(clockInterval);
    timer = "waiting";
    document.getElementById("btn").innerText = "Start";
  }   
}

answered Jun 01 '18 at 00:09

CertainPerformance

356,069
52
309
320

You code makes sense but your explanation does not: what do you mean by "..the result of your call.. "? Do you mean reassigning the variable equal to the interval? – The Demon Hunter Jun 01 '18 at 00:19
The result of calling `setInterval` is an intervalID - so, just assign that to a variable that you can call `clearInterval` with later. – CertainPerformance Jun 01 '18 at 00:20

Using clearInterval in a variable

1 Answers1