javascript - 点击事件后重复的倒计时计时器

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()

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

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 的响应，所以不会详细介绍它，因为这可能是您正在寻找的答案。