setInterval continues to run after clearInterval is called

Question

I'm working on a countdown timer for a quiz app I'm building as a homework assignment during bootcamp. Right now everything is functioning properly when rendered except that once the setInterval function inside of startQuiz() hits 0 it's supposed to clear the interval. However, the innerHTML written to the document keeps flashing momentarily as if the countdown is still running. I think it's probably a return in the wrong place but I've tried adding, subtracting, and moving returns throughout the script and am not seeing where the solution is.

var startButton = document.querySelector("#startButton"); 
var time = document.querySelector("#time");
var countdown = document.querySelector("#countdown");
var timeLeft;
var userScore;

startButton.addEventListener("click", startTimer);

function startTimer() {
    var startCount = 5;
    setInterval(function(){
        if(startCount <= 0) {
            clearInterval(startCount=0);
            startQuiz();
        }
        countdown.innerHTML = startCount;
        startCount -=1;
    }, 1000);
    return;
}
    
function startQuiz() {
    timeLeft = 10;
    quizQuestions();

    setInterval(function(){
        if(timeLeft <= 0) {
            clearInterval(timeLeft=0);
            gameOver();
        }
        time.innerHTML = timeLeft;
        timeLeft -=1;
    }, 1000)
    return;
}

function gameOver() {
    document.getElementById("quizQuestion").innerHTML = "GAME OVER";
    return;
}

function quizQuestions() {
    document.getElementById("quizQuestion").innerHTML = questionA.question;
    return;
}

This is the entire script so far. I only left out the var definition for questionA since it is an object with multiple key value pairs and is not relevant to the issue so I omitted it to save space. The startTimer() function works properly as a separate countdown timer to start the game but I included it in the code in case it's interfering with the startQuiz() function in some way.

That's not how clearInterval works. `clearInterval` is expected to be given a variable that points to an interval. `var x = setInterval(...); clearInterval(x);` — Taplar, Sep 09 '20 at 19:45
Does this answer your question? [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — tevemadar, Sep 09 '20 at 19:47
Aha! Much better now and the syntax makes more sense. Not sure what thought process got me there but thanks for the correction. — Jon Deavers, Sep 09 '20 at 19:54

Mustafa Arslan · Accepted Answer · 2021-06-14T15:03:21.777

1

setInterval returns integer for interval identification. You must use this integer to clear interval.

var intervalId = setInterval(function(){
   if(timeLeft <= 0) {
      clearInterval(intervalId);
      gameOver();
   }
   time.innerHTML = timeLeft;
   timeLeft -=1;
}, 1000);

edited Jun 14 '21 at 15:03

answered Sep 09 '20 at 19:47

Mustafa Arslan

774
5
13

score 0 · Answer 2 · answered Sep 09 '20 at 19:48

// assign to a variable...
const interval = setInterval(callback, timing)

// ...then pass that variable to clearInterval
clearInterval(interval)

In this example, interval will be a number (incremented each time a call to setInterval or setTimeout is made). If you pass someOtherVariable = 0 to clearInterval, you're actually passing 0, because assignment returns the value assigned. The incrementing interval/timeout value starts from 1, so the interval identified by 0 will never exist, thus clearing it is a no-op.

setInterval continues to run after clearInterval is called

2 Answers2