如何在達到零後停止計時器？

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

來源

2016-11-16 Jasmine Lognnes

你應該張貼的你已經試圖表明，你不問別人做你的工作你一些例子或解釋。 – DevlshOne

您是否嘗試過使用'setTimeout'而不是'setInterval' - 請參閱文檔[here]（http://www.w3schools.com/js/js_timing.asp） – gus27

@ gus27是的，但後來我發現它的問題不會每秒更新並且只在完成時更新。 –

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>

來源

2016-11-16 12:54:03

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

來源

2016-11-16 12:53:04 Weedoze

你真的嘗試過嗎？它不顯示警報。 – trincot

@trincot我忘記了這部分的問題。我的答案現在已更新 – Weedoze

這是解決它的一種方法，更好的模式是使用可以傳遞到執行方法中的回調。 –

你不能強迫異步方法返回異步操作完成後 - 而且這樣做是一個反模式。

相反，您可以在異步操作完成時將函數傳遞給要執行的方法。您還需要存儲對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>

來源

2016-11-16 12:55:21

如何在達到零後停止計時器？

回答

相關問題