Reputation: 13
i am having an issue while creating a JS timer. When the time end or is manually stopped, the function keep executing seconds--
, so even if the time is reset, when started again it starts running at double the speed. How do i manually stop a function? I tried to label it and to use break label;
without much success. Here is my code
HTML
<div id="clock-form">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<input type="number" step="10" id="time-minutes" class="time" value="30"><div id="clock-time"></div></div>
<div id="clock-buttons">
<button id="play-button" type="submit" name="play"><i class="fa fa-play clock-buttons" aria-hidden="true"></i></button>
<button id="stop-button" type="submit" name="stop"><i class="fa fa-stop clock-buttons" aria-hidden="true"></i></button>
</div>
JS
window.onload = function() {
if(getCookie("date2")) {
startCountdown();
}
var inputMinutes = document.getElementById("minutes");
var startButton = document.getElementById("play-button");
startButton.onclick = function() {
startCountdown();
}
stopButton = document.getElementById("stop-button");
stopButton.onclick = function() {
delete_cookie("date2");
clearInterval("intervalHandle");
document.getElementById("clock-time").style.display = "none";
document.getElementById("time-minutes").style.display = "inline";
// Stop here?
}
}
function startCountdown() {
var minutes = document.getElementById("time-minutes").value;
if(isNaN(minutes)) {
alert("Por favor, inserir um número");
return;
}
var dateNow = Math.floor(new Date());
if(!getCookie("date2")) {
var dateEnd = (dateNow + (minutes * 60000));
} else {
var dateEnd = getCookie("date2");
}
document.cookie = "date2="+dateEnd;
secondsRemaining = Math.floor((dateEnd - dateNow) / 1000);
intervalHandle = setInterval(tick, 1000);
document.getElementById("time-minutes").style.display = "none";
document.getElementById("clock-time").style.display = "inline";
}
function tick() {
var timeDisplay = document.getElementById("clock-time");
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
if (sec < 10) {
sec = "0" + sec;
}
var message = min + ":" + sec;
timeDisplay.innerHTML = "<div style=\"display:inline-block; font-family: 'Open Sans'; font-size:0.9em; font-weight: bold;\">" + message + "</div>";
if(secondsRemaining === 0) {
alert("Time's over");
clearInterval("intervalHandle");
document.getElementById("clock-time").style.display = "none";
document.getElementById("time-minutes").style.display = "inline";
delete_cookie("date2");
// Stop here?
}
secondsRemaining--;
}
I have omitted functions regarding the cookies. Thanks a lot everybody!
Upvotes: 0
Views: 1020
Reputation: 4069
If you are referring to stopping the code that is running on the interval, simply call clearInterval(intervalHandle)
https://www.w3schools.com/jsref/met_win_clearinterval.asp
I could be totally wrong, but I don't think you want to pass the variable to clearInterval as a string. Instead of calling clearInterval("intervalHandle")
call clearInterval(intervalHandle)
Upvotes: 1