setInterval經常觸發（Javascript）

Question

我一直在嘗試為我為網站制作的簡單倒數計時器編寫代碼（請在此處查看：sbtimescore.github.io）。 不幸的是，我遇到了我有限的知識無法解決的邏輯錯誤（我是新手）。 反復按啟動/暫停鍵時，計時器開始加速。 我已經發布了在下面運行onclick（）的代碼：

function spGameClock() {
  if (gameClockRunning == false) {
    gameClockRunning = true;
  } else {
    gameClockRunning = false;
    return;
  }

  function timer() {
    if (gameCounter == 0) {
      clearInterval(interval);
      $("#GameClockText").html(secondsToText(gameCounter));
      blinkIt("GameClockBox");
    } else if (gameCounter > 0 && gameClockRunning == true) {
      $("#GameClockText").html(secondsToText(gameCounter));
      gameCounter = gameCounter - 1;
    } else if (gameCounter > 0 && gameClockRunning == false) {
      clearInterval(interval);
    } else {}
  }

  var interval = setInterval(timer, 1000);
}

我知道間隔被調用了太多次，但是我不確定如何解決。 如果有人能解決，我將不勝感激。

Answer 1

您應該將interval定義為spGameClock函數之外的變量。 一個好的地方將在jQuery ready回調中。 然后，您還可以使用該變量本身來確定時鍾是否在計時。

這是使用countdownjs的實現：

 $(function () { var interval = null, // define outside of spGameClock scope gameCounter = 10; // Some initial value function spGameClock() { // Use interval as detection: if (interval == null) { interval = setInterval(timer, 1000); $("#GameClockText").text(secondsToText(gameCounter)); } else { clearInterval(interval); interval = null; // Always set to null after clearing $("#GameClockText").text(secondsToText(gameCounter) + " (paused)"); } function timer() { gameCounter--; $("#GameClockText").text(secondsToText(gameCounter)); // No need to test interval for null here, since it certainly is not. if (gameCounter <= 0) { clearInterval(interval); interval = null; blinkIt("GameClockBox"); } } } // Attach event handler here instead of using onclick attribute $("#toggle").click(spGameClock); // Start clock now spGameClock(); // Utility functions: function secondsToText(sec) { // Uses countdown library: return countdown(new Date().getTime() + 1000*sec).toString() || "Game Over!"; } function blinkIt(id) { (function loop(times) { if (times) $('#' + id).fadeToggle(400, loop.bind(null, times-1)); })(6); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js"></script> <button type="button" id="toggle">Pause/Continue</button> <div id="GameClockBox"> <div id="GameClockText"></div> </div>