javascript - 如何在问答游戏中使用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() 使用的全局范围。