如何使window.clearInterval（）與此JavaScript代碼一起工作？

Question

我試圖實現一個番茄鍾，在潛入真正的代碼之前，我正在玩window.setInterval()及其對應的window.clearInterval。我面臨的問題是我無法爲window.clearInterval()工作。請看看我的代碼，並指導我如何使其工作。謝謝

var startTime = 11; 
 
var intervalID; 
 

 
function downCounter() { 
 
    startTime--; 
 
    $('h2').text(startTime); 
 
} 
 

 
if (startTime > 0) 
 
    intervalID = setInterval(downCounter, 1000); 
 
else 
 
    clearInterval(intervalID);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2></h2>

Answer 1

的else這裏：

if (startTime > 0) 
    intervalID = setInterval(downCounter, 1000); 
else 
    clearInterval(intervalID); 

將永遠不會運行。

該塊只運行一次，在定時器啓動之前，當您知道即startTime是> 0。

檢查startTime在處理程序，並清除間隔有當它走得太遠了：

var startTime = 11; 
 
var intervalID; 
 

 
function downCounter() { 
 
    startTime--; 
 
    $('h2').text(startTime); 
 
    
 
    if (startTime <= 0) 
 
    clearInterval(intervalID); 
 
} 
 

 
intervalID = setInterval(downCounter, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2></h2>

Answer 2

在你的代碼，if (startTime > 0)檢查僅在第一次。試試這個方法：

$(document).ready(function() { 
    var startTime = 11; 
    var intervalID; 
    function downCounter() { 
     startTime--; 
     $('h2').text(startTime); 
     if (startTime <= 0){ 
      clearInterval(intervalID); 
     } 
    } 
    intervalID = setInterval(downCounter, 1000);  
}); 

Answer 3

調用clearInterval應遞減函數被調用：

function downCounter() { 
     startTime--; 
     $('h2').text(startTime); 
     if (startTime <= 0) { 
     clearInterval(intervalID); 
     }  
    }