Как очистить мои таймеры, используя clearInterval () в моей викторине?

Question

Я уже некоторое время работаю над этой игрой викторин, и я не могу сломать эти таймеры, я исчерпал все свои ресурсы, чтобы найти решение, чтобы очистить мои таймеры.

Вот HTML:

<div class="game-wrapper"></div>
<div id="container">
  <h1>Trivia Game</h1>
  <div class="card">
    <div id="time">Time Left: <span id="timer"></span></div>
    <div id="question"></div>
    <div id="answers">
      <button id="optionA"></button>
      <button id="optionB"></button>
      <button id="optionC"></button>
      <button id="optionD"></button>
    </div>
  </div>
</div>

Вот js:

var time     = 20;
var timeLeft = $('#timer');
var interval;

function timerRun() {
  var interval = setInterval(function () {
    time--;
    $(timeLeft).text(time);
    console.log(time);
    if (time === 0) {
      unanswered++;
      $('#unanswered').text(unanswered);
      resetTime();
      renderQuestion();
    }
  }, 1000);
}

function stopTimers() {
  clearInterval(interval);
}

function resetTime() {
  stopTimers();
  time = 20;
  $(timeLeft).text(time);
}

function startAnswers() {
  $(optionA).on('click', function () {
    console.log('this is the correct button');
    console.log('this button is being clicked A');
    correct++;
    $('#correct').text(correct);
    $('#optionA').addClass('correct-button');
    $('#optionA').removeClass('correct-button');
    renderQuestion();
    resetTime();
    timerRun();
  });
  $(optionB).on('click', function () {
    console.log('wrong button');
    console.log('this button is being clicked B');
    incorrect++;
    $('#incorrect').text(incorrect);
    $('#optionB').addClass('incorrect-button');
    $('#optionB').removeClass('incorrect-button');
    renderQuestion();
    resetTime();
    timerRun();
  });
  $(optionC).on('click', function () {
    console.log('wrong button 2');
    console.log('this button is being clicked C');
    incorrect++;
    $('#incorrect').text(incorrect);
    $('#optionC').addClass('incorrect-button');
    $('#optionC').removeClass('incorrect-button');
    renderQuestion();
    resetTime();
    timerRun();
  });
  $(optionD).on('click', function () {
    console.log('wrong button 3');
    console.log('this button is being clicked D');
    incorrect++;
    $('#incorrect').text(incorrect);
    $('#optionD').addClass('incorrect-button');
    $('#optionD').removeClass('incorrect-button');
    renderQuestion();
    resetTime();
    timerRun();
  });
}

Выше я пытался очистить свои интервалы с помощью функции, но каждыйвремя, когда я нажимаю кнопку, таймер все еще

Answer 1

Ваша проблема в этой строке:

var interval = setInterval(function () { ...

Удалите «var» для работы, потому что в качестве его набора вы используете локальную переменную, а не глобальную область видимости, которую использует clearInterval ().