点击事件后倒数计时器重复

Question

我有这个功能：

var secondsRemaining = 45;

function countdown(secondsRemaining) {
var  seconds = secondsRemaining;
if (secondsRemaining > 0) {
 $('.timer > div').html(seconds);
 secondsRemaining--;
} else {
 if (secondsRemaining == 0) {
  // Times up ....
 }
 }
setInterval(function() {
countdown(secondsRemaining);
}, 1000); 
}

我正在使用以下命令在Document ready函数中运行该函数：

 countdown(secondsRemaining);

我也点击了答案后再次运行它。 问题是我现在有2个倒数计时器同时运行，新的倒数计时器从45秒开始运行，而旧的倒数计时器从原来的位置继续运行。

Answer 1

使用clearInterval()

首先，存储第一个setInterval()的时间间隔id：

var secondsRemaining = 45;

function countdown(secondsRemaining) {
var  seconds = secondsRemaining;
if (secondsRemaining > 0) {
 $('.timer > div').html(seconds);
 secondsRemaining--;
} else {
 if (secondsRemaining == 0) {
  // Times up ....
 }
 }
myinterval=setInterval(function() { //myint now contains the interval id
countdown(secondsRemaining);
}, 1000); 
}

现在，当用户单击时，在设置新间隔之前，请使用clearInterval()取消第一个间隔：

button.onclick=function(){
  //do stuff
  clearInterval(myinterval)
  setInterval(function() {
    countdown(secondsRemaining);
   }, 1000); 
   // do stuff
}

Answer 2

抱歉，我不太了解问题的表达方式，似乎是说您故意要启动两个时间事件，一个事件是在文档加载后，另一个是单击答案时，这两个事件都输出到同一元素。

如果问题是您希望它的输出包含两个不同的元素，则可以传递您可以使用的元素的参数：

countdown($('.pick-me'), secondsRemaining);

如果要使用相同的元素，则可以始终清除每次单击的时间间隔，然后为新事件设置时间间隔，只需获取更新并查看Manishearths响应即可，因此不再赘述，因为这可能是您正在寻找的答案。