javascript - 调用 clearInterval 后 setInterval 继续运行

Question

我正在为我在训练营期间作为家庭作业构建的测验应用程序开发倒数计时器。现在一切都在渲染时正常运行，除了一旦 startQuiz() 内部的 setInterval 函数达到 0，它应该清除间隔。但是，写入文档的 innerHTML 会持续闪烁，就好像倒计时仍在运行一样。我认为这可能是在错误的地方返回，但我尝试在整个脚本中添加、减去和移动返回，但没有看到解决方案在哪里。

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;
}

这是到目前为止的整个脚本。我只省略了 questionA 的 var 定义，因为它是一个具有多个键值对的对象并且与问题无关，所以我省略了它以节省空间。startTimer() 函数可以作为单独的倒数计时器正常工作以启动游戏，但我将它包含在代码中以防它以某种方式干扰 startQuiz() 函数。

标签： javascriptsetintervalclearinterval

Answer 1

setInterval返回整数用于区间识别。您必须使用此整数来清除间隔。

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