如何在达到零后停止计时器?
问题描述:
在这http://jsfiddle.net/kuox9ax2/我有一个计时器倒计时。如何在达到零后停止计时器?
- 当它达到零时,它重新开始。它不应该那样做。
- 由于JS是异步的,我不知道如何让它调用一个函数,只有当它已经达到零。
我试图在startTimer()
return true
,但后来我碰到,JS是异步的,所以它立即返回true。
有人可以展示如何解决这两个问题?
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function() {
minutes = parseInt(timer/60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() {
var time = 5, display = document.querySelector('#time');
var isDone = startTimer(time, display);
if (isDone) {
alert("a");
}
};
<div>Timeout in <span id="time">00:00</span> minutes</div>
答
Store中间隔一个变量,并调用clearInterval
达到0.1的JavaScript函数时,可以作为参数传递,通常是n主题回调。只需传递一个函数作为参数,并在需要时调用它。
function startTimer(duration, display, callback) {
var timer = duration,
minutes, seconds;
var myInterval = setInterval(function() {
minutes = parseInt(timer/60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
// clear the interal
clearInterval(myInterval);
// use the callback
if(callback) {
callback();
}
}
}, 1000);
}
window.onload = function() {
var time = 5,
display = document.querySelector('#time');
startTimer(time, display, function() { alert('done'); });
};
<div>Timeout in <span id="time">00:00</span> minutes</div>
答
您可以使用WindowTimers.clearInterval()
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var myInterval = setInterval(function() {
minutes = parseInt(timer/60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(myInterval);
doneFunction();
}
}, 1000);
}
window.onload = function() {
var time = 5, display = document.querySelector('#time');
startTimer(time, display);
};
function doneFunction(){
console.log("done !");
}
<div>Timeout in <span id="time">00:00</span> minutes</div>
答
你不能强迫异步方法返回异步操作完成后 - 而且这样做是一个反模式。
相反,您可以在异步操作完成时将函数传递给要执行的方法。您还需要存储对setInterval()
的引用,并在计时器达到零时致电clearInterval()
。试试这个:
function startTimer(duration, display, callback) {
var timer = duration, minutes, seconds;
var interval = setInterval(function() {
var minutes = parseInt(timer/60, 10)
var seconds = parseInt(timer % 60, 10);
display.textContent = ("00" + minutes).slice(-2) + ":" + ("00" + seconds).slice(-2);
if (minutes === 0 && seconds === 0) {
clearInterval(interval);
callback && callback();
}
timer--;
}, 1000);
}
window.onload = function() {
var time = 5, display = document.querySelector('#time');
startTimer(time, display, function() {
console.log("timer reached zero");
});
};
<div>Timeout in <span id="time">00:00</span> minutes</div>
你应该张贴的你已经试图表明,你不问别人做你的工作你一些例子或解释。 – DevlshOne
您是否尝试过使用'setTimeout'而不是'setInterval' - 请参阅文档[here](http://www.w3schools.com/js/js_timing.asp) – gus27
@ gus27是的,但后来我发现它的问题不会每秒更新并且只在完成时更新。 –