時間間隔不斷變化？

Question

所以在我的代碼中，如果一個元素沒有做某事[playing]，那麼我就開始播放它。如果正在玩，請停止這件事。我設法讓它開始玩，但它永遠不會停止。

var playing = false; 
var current = 30; 
$('#countDownContainer').click(function() { 
     if (!playing) { 
      playing = false; 
      setInterval(function() { 
       $('#workSpace label').get(0).innerHTML = current; 
       current -= 1; 
      },1000); 
     } else { 
      playing = true; 
     } 
    }); 

理論上，當用戶單擊#countDownContainer，playing將被設置爲false並運行setInterval代碼，如果它已經打，playing將被設置爲true，當通過循環去它不會運行。但事實上，它不斷從30更改爲29並返回到30。並且，當我再次單擊該按鈕時，它永不停止。請幫助 - 謝謝

Answer 1

var clear= setInterval(function() { 
        $('#workSpace label').get(0).innerHTML = current; 
        current -= 1; 
       },1000); 

    clearinterval(clear);// to stop interval where you want 
    //clearInterval(id_of_setinterval) 

參考clearInterval

Answer 2

首先，我想你混淆了你的變種playing分配。 你也應該分配ID從setInterval返回以便以後可以中止那些intervalled循環與clearInterval：

//initialize var at the start of the script 
var intervalID; 

// in the onclick event 
if (!playing) { 
    playing = true; // should be true here 
    intervalID = setInterval(function() { 
     $('#workSpace label').get(0).innerHTML = current; 
     current -= 1; 
    },1000); 
} else { 
    playing = false; // should be false here 
    clearInterval(intervalID); 
} 

見documentation on clearInterval

Answer 3

這就是所謂的logic error。

由於注意以下幾點：

var playing = false;   // playing is initialised to false 

if (!playing) {    // if not playing 
     playing = false;  // set playing to false 

因此playing就永遠不能成爲true。

您可以通過以下步驟解決：

var playing = false; 
var current = 30; 
$('#countDownContainer').click(function() { 
    if (playing) { 
     playing = false; 
    } else { 
     playing = true; 
     setInterval(function() { 
      $('#workSpace label').get(0).innerHTML = current; 
      current -= 1; 
     },1000); 
    } 
}); 

用文字表示：

如果沒有playing，我們將其打因而：playing = true;

如果playing，我們將其不打因此：playing = false

附錄

對於停止問題，請參考@Riturajratan他的問題。