Looking for some insight on why my javascript timer doesn't work correctly. Actually it works great except for the fact that it stops with 1 second left and displays an alert. When you hit the ok button it counts down to the final second (0) and displays the alert again. I can't figure out how to stop the alert occuring at 1 second left instead of only at zero seconds...
I altered the code to run at 6 seconds instead of the full ten minutes
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) {
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}
<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
This is because the JS is exectuted for the DOM update is shown to the user. This has to do with the JS event loop, and can be circumvented by using setTimeout with a very low timeout, ie 1ms. See the code snippet below for a working example
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
--timer
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) {
setTimeout(function(){
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}, 1);
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}
<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
Related
In this JSfiddle, I have a code where if you click on the button, it automatically creates another set interval within the old one,
I have clearInterval but for some reason, it's not working
(Try clicking on the timer button multiple times)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
$("#btn").on('click', function() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
});
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var interval;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
} </script>
enter link description here
Problem is because you're calling the interval var within the function scope, while you should be declaring it on a global scope, try this
var interval; // global var
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
}
Here i have a simple javascript which i want to making a simple CountDownTimer with cancel and restarting features, unfortunately after starting timer using setInterval that's return only 4 number in console and i can't fix that. without assuming this problem clearInterval not working to which i want to support cancel and restart again this time
<script type="text/javascript">
var fiveMinutes = 5, display = document.querySelector('#time');
let myTimer = function (){
let timer = fiveMinutes, minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(this);
}
console.log(timer);
};
$('#startTimer').on('click', function(){
$('#resend').hide();
$('#time').show();
setInterval(myTimer , 1000);
});
</script>
Your code fixed below. The main problem was fiveMinutes permanently being reassigned to 5, which I solved with a closure. Also it was not multiplied by 60 to be converted in seconds.
const display = document.querySelector('#time');
let interval;
function myTimer (timer) {
return function () {
let minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(interval);
}
console.log(timer);
}
};
$('#startTimer').on('click', function () {
$('#resend').hide();
$('#time').show();
clearInterval(interval);
interval = setInterval(myTimer(5 * 60), 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time"></div>
<button id="startTimer">Start</button>
I can't seems to be able to stop the timer when it reaches zero. It will just repeat back to the original timing! See my codes below.
What I am trying to achieve is, once timer is 0, it will replace 00:00 with the text "Your time is up".
HTML:
<div class="quizTimer right">
<span>Timer:<br /><span id="qTimer"></span></span>
</div>
This is the Javascript which I did:
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;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(timer); // this piece of code didnt stop the timer
}
}, 1000);
}
window.onload = function () {
var oneMinute = 10 * 1,
display = document.querySelector('#qTimer');
startTimer(oneMinute, display);
};
clearInterval() expects a reference to the interval to be passed.
You're passing timer, which is not a reference to the interval - it's an integer from the passed-in function param.
Assign your interval to a variable and reference that when you want to clear it.
let foo = setInterval(() => {
/* code... */
clearInterval(foo);
}, 1000);
You just need to capture the interval id returned by setInterval() and use that:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var id = 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;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(id); // uses returned id
}
}, 1000);
}
I have a requirement of one minute timer in javascript in that as soon as 1 minute completed,Then show alert and halt script but in the code i try to change the condition but is not working,So i want after one minute alert should get and stop script
<script>
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;
// alert(timer);
if (--timer < 0) {
timer = duration;
}
// if one minute is completed show alert and stop script
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var x=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;
// alert(timer);
if (--timer < 0) {
timer = duration;
alert('Timeup');
clearInterval(x); //script will stop and will not be execute
}
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
I'm trying to create a timer for 30 seconds and i'm looking to do this on my own, however I seem to be stuck here:
var Starttime = ( needs to be 30 seconds )
var Timeleft = Starttime - 1
if (Timeleft === 0) {
console.log("TIMER FINISHED BEEP BOOP");
}
and through lots of research still not able to find how to declare variable as a simple 30 seconds of time, and I am aware that I would need to do the same for the 1 ( change it to 1 second). TL;DR how do I write 30 seconds
try this function using setinterval() :
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 () {
//this is where you can modifies the time amount.
var minutes= 60 ,
display = document.querySelector('#time');
startTimer(minutes, display);
};
<body>
<div>One minute countdown <span id="time">1:00</span> minutes!</div>
</body>