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

并且在点击答案后我再次运行它。问题是我现在有两个倒数计时器同时运行，一个从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的响应，所以不会再详细介绍它了这可能是你正在寻找的答案。

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

2 个答案: