时间间隔不断变化？

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他的问题。