使用 clearInterval 清除并使用 setInterval 重置时，setInterval 不会重新启动答案

【问题标题】：setInterval won't restart when cleared with clearInterval and reset with setInterval使用 clearInterval 清除并使用 setInterval 重置时，setInterval 不会重新启动
【发布时间】：2020-02-23 04:27:34
【问题描述】：

我有一个倒计时，它使用 setInterval 以一秒为间隔从一分钟倒计时。单击“开始”按钮时，它会使用 setInterval(countdown, 1000) 开始倒计时。当我单击另一个按钮时，它会清除倒计时。如果我再次按下“开始”按钮，间隔不会再次使用 setInterval(countdown, 1000) 倒计时 - 它停留在一分钟。

我使用 setInterval 对吗？一旦再次单击开始按钮，我希望 setInterval 以 1 秒的间隔开始倒计时。

请在下方找到相关代码，感谢您的宝贵时间。

//Start button
$("#startQuiz").click(function () {
            $(".questionStart").css("display", "none").removeClass("questionActive");
            $(".questionStart").next().addClass("questionActive");

            startTimer = true;
            setInterval(countdown, 1000);

        });

//countdown code (at a global scope)
var countdown = setInterval(function () {

    if (startTimer === true) {    
            //timer code here
        }
    }

}, 1000);

//reset countdown code called on separate button click
function levelCloseReset() {
    startTimer = false;
    clearInterval(countdown);
}

【问题讨论】：

setInterval() 的第一个参数应该是一个函数。 setInterval 函数本身返回一个 number，这是一个稍后用于清除计时器的键。
@Pointy 感谢您的指导。看来我对 setInterval 的理解是错误的。你提到它返回一个数字 - 这个数字的性质是什么，它可以用来重置计时器吗？

标签： javascript jquery

【解决方案1】：

试试这个。

  (function() {
    let counter = null;
    let timer = 60;
    $("#startQuiz").click(function () {
        resetQuiz(); // reset the quiz;
        $(".questionStart").css("display", "none").removeClass("questionActive");
        $(".questionStart").next().addClass("questionActive");
        $("#startQuiz").attr("disabled", true);
        $("#stopQuiz").attr("disabled", false);
        $("#count-down").text("Time Remaining: " + timer);
        counter = setInterval(countDown, 1000);
    });

    $("#stopQuiz").click(function () {
        $(".questionStart").css("display", "none").removeClass("questionActive");
        $(".questionStart").next().addClass("questionActive");
        $("#startQuiz").attr("disabled", false);
        $("#stopQuiz").attr("disabled", true);
        $("#count-down").text("Stopped: ");
        resetQuiz();
    });

    function countDown() {
      if(timer === 0) {
        $("#count-down").text("Time Over: ");
        $("#startQuiz").attr("disabled", true);
        $("#stopQuiz").attr("disabled", true);
        resetQuiz();
      } else {
        $("#count-down").text("Time Remaining: " + --timer);
      }
      
    }
    
    function resetQuiz() {
      timer = 60;
      clearInterval(counter);
    }
  }
  )();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="count-down"></div>
    <button type="button" id="startQuiz">Start Quiz</button>
    <button type="button" id="stopQuiz" disabled>Stop Quiz</button>

【讨论】：

感谢您的回复。这个解决方案帮助我找出了我的问题。我会将此标记为答案。