如何在达到零后停止计时器？

Question

在这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>

Answer 1

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>

Answer 2

您可以使用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>

Answer 3

你不能强迫异步方法返回异步操作完成后 - 而且这样做是一个反模式。

相反，您可以在异步操作完成时将函数传递给要执行的方法。您还需要存储对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>