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>