javascript - Countdown timer execute external function
I'm working on a quiz that uses a countdown timer that lasts 40 minutes the code is the following:
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) {
clearInterval(__timer);
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fortyMinutes = 60 * 40,
display = document.querySelector('#time');
startTimer(fortyMinutes, display);
};
and I need that, when it ends, execute the following function in order to send the scores to a table in mysql and don't let the user to continue answering:
function showScores() {
var gameOverHTML = "<br><h1>Haz terminado, puedes proceder a abandonar la applicaci??n.<br> Puedes hacer uso de los botones en la barra de navegaci??n</h1>";
gameOverHTML += "<h2 id='score'> Tu Resultado: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
$.ajax({
type: "POST",
url: "addanswer.php",
datatype: "text",
data: "TotalScore=" + quiz.score,
success: function(guardar){
console.log ("Datos guardados correctamente");
}
}
)
};
How can I make this happen?
Answer
Solution:
You can send you function as a CallBack:
function startTimer(duration, display, cb) {
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) {
clearInterval(__timer);
timer = duration;
}
// callback execution
cb();
}, 1000);
}
function showScores() {
var gameOverHTML = "<br><h1>Haz terminado, puedes proceder a abandonar la applicaci??n.<br> Puedes hacer uso de los botones en la barra de navegaci??n</h1>";
gameOverHTML += "<h2 id='score'> Tu Resultado: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
$.ajax({
type: "POST",
url: "addanswer.php",
datatype: "text",
data: "TotalScore=" + quiz.score,
success: function(guardar){
console.log ("Datos guardados correctamente");
}
}
)
};
window.onload = function () {
var fortyMinutes = 60 * 40,
display = document.querySelector('#time');
// new callback param
startTimer(fortyMinutes, display, showScores);
};
Source