setInterval не будет перезапущен после очистки с помощью clearInterval и сброшен с помощью setInterval

Question

У меня есть обратный отсчет, который использует setInterval для отсчета от одной минуты с интервалом в одну секунду. При нажатии кнопки «Пуск» начинается обратный отсчет с использованием setInterval (обратный отсчет, 1000). Когда я нажимаю другую кнопку, он очищает обратный отсчет. Если я снова нажму кнопку «Пуск», интервал не будет снова отсчитываться с помощью setInterval (обратный отсчет, 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);
}

Answer 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>