调用clearInterval后setInterval继续运行

setInterval continues to run after clearInterval is called

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

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 定义,因为它是一个具有多个键值对的对象并且与问题无关,所以我省略它以保存 space。 startTimer() 函数作为一个单独的倒计时计时器正常工作以启动游戏,但我将其包含在代码中以防它以某种方式干扰 startQuiz() 函数。

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

var intervalId = setInterval(function(){
   if(timeLeft <= 0) {
      clearInterval(intervalId);
      gameOver();
   }
   time.innerHTML = timeLeft;
   timeLeft -=1;
}, 1000);
// assign to a variable...
const interval = setInterval(callback, timing)

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

在此示例中,interval 将是一个数字(每次调用 setIntervalsetTimeout 时递增)。如果你将 someOtherVariable = 0 传递给 clearInterval,你实际上传递的是 0,因为赋值 returns 赋值。递增的interval/timeout值是从1开始的,所以0标识的区间将永远不存在,因此清除它是一个no-op.