When I click the pause button on my Timer, it correctly pauses the countdown. However, when I click the button again, the timer starts from the beginning instead of where it was paused. How can I prevent this issue and ensure that the pause function works correctly?
var label = document.getElementById("exerciseLabel");
var button = document.getElementById("pauseButton");
var counter = document.getElementById("exerciseCounter");
var routine = document.getElementById("info");
var current = 0;
var playing = false;
var countdownTimer = null;
var workout =
{
"title": "Full Body",
"exercises":
[
{
"name": "Push Ups",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Running in place",
"duration": 3,
"break": 3
}
]
};
// LOOPING TIMER FUNCTION
// Initialise virtual trainer.
init();
/**
* Bind loop start to click on button.
*
* @return {void}
*/
function init()
{
loop();
button.addEventListener("click", toggle);
}
/**
* Play / Stop exercising.
*
* @return {void}
*/
function toggle()
{
if (playing)
{
pause();
}
else
{
loop();
}
}
/**
* Reset timer. <--SHOULD BE PAUSE
*
* @return {void}
*/
function pause()
{
playing = false;
setLabel("Paused");
//setCounter('--')
if (countdownTimer)
{
clearTimeout(countdownTimer); // FIGURE OUT HOW NOT TO CLEAR
}
}
// TIMER FUNCTION
/**
* Timer loop function
*
* @return {void}
*/
function loop()
{
playing = true;
// Change button label
setButtonText("Pause");
// Get current exercise
var exercise = workout.exercises[current];
// If out of the exercises Array's bounds, call 'done'
if (!exercise)
{
return done();
}
// Otherwise run countdown and update UI.
countdown(exercise.duration, exercise.name, function ()
{
countdown(exercise.break, "Break", function ()
{
// Next exercise.
current++;
// Re-iterate until finished.
loop();
});
});
}
/**
* Exercise session is now over.
*
* @return {void}
*/
function done()
{
pause();
document.getElementById("feedbackScreen").style.display = "block";
}
/**
* Recursive timer function.
*
* @param {Number} seconds
* @param {String} label
* @param {Function} callback
* @return {void}
*/
function countdown(seconds, label, callback)
{
setLabel(label);
setCounter(seconds);
// Set timeout to next second
countdownTimer = setTimeout(function ()
{
// Decrease seconds.
seconds--;
// Check whether the countdown is over - execute callback if so.
if (seconds <= 0)
{
return callback();
}
// Call itself with a lower number otherwise.
countdown(seconds, label, callback);
}, 1000); // (1 sec).
}
/**
* Set counter text.
*
* @param {Number} val
* @return {void}
*/
function setCounter(val)
{
counter.innerHTML = val;
}
/**
* Set label text.
*
* @param {String} text
* @return {void}
*/
function setLabel(text)
{
if (label.textContent === text)
{
return;
}
label.innerHTML = text;
}
/**
* Set button text.
*
* @param {String} text
* @return {void}
*/
function setButtonText(label)
{
button.innerHTML = label;
} <div id="exerciseLabel"></div>
<button id="pauseButton"></button>
<div id="exerciseCounter"></div>
<div id="info"></div>