Why my interval is still counting and didn't stop at 0? - javascript

I wonder why my countdown didn't stop at 0, the "Time's Up" log are still logging infinitely.
Here's my code:
let timer = 6;
setInterval(function () {
if (timer > 0) {
timer--;
console.log(timer);
} else {
console.log("Time's Up");
clearInterval(timer);
}
}, 1000);

clearInterval needs to know the action you want to cancel. In this case, the action is actually your setInterval, so just assign it to a variable and use that variable as a parameter for clearInterval.
const myInterval = setInterval(() => {
if (timer > 0) {
timer--;
console.log(timer);
} else {
console.log("Time's Up");
clearInterval(myInterval);
}
}, 1000);

What I understand that you are using timer as a variable. So, you are doing one mistake, you are giving wrong parameter inside clearInterval method. You can stop clearInterval method by the code written below:-
NOTE:- I just substitute console.log with document.write to show the Output on screen.
var timer = 5;
var myinterval = setInterval(function () {
if (timer > 0) {
timer--;
document.write(timer+"<br>");
} else {
document.write("Time's Up");
clearInterval(myinterval);
}
}, 1000);

Related

clearInterval isn'tworking

I have to clear the interval but I don't know why it isn't working. Normally it schould be quite simple, but I just can't find out whats wrong.
if(data.groupStandings[0].active === true){
Tabelle();
var timerId = setInterval(countdown, 1000);
if(data.groupStandings[0].active === false){
clearInterval(timerId);
}
var timeLeft = 5;
function countdown() {
if (timeLeft < 0) {
clearTimeout(timerId);
code();
timeLeft--;
if(timeLeft <= -5){
timeLeft = 5;
}
} else {
code();
timeLeft--;
}
}
}
You're entering the case when
data.groupStandings[0].active === true
but trying to clear the interval on the value being false
var timerId = setInterval(countdown, 1000);
if (data.groupStandings[0].active === false) { // here
clearInterval(timerId);
}
so content of the if block will not be read at all unless data.groupStandings[0].active somehow changes it's state (which is not seen in the code)

How can I get my counter to stop at 0? It decrements to negative numbers

What's wrong with my code? I can't get the timer to stop at 0. It keeps going down to negative numbers. I have my clearInterval set, why isn't the timer stopping?
var seconds = 30;
$("#timer").on("click", run);
$("#timer").on("click", show);
var timer;
function run() {
clearInterval(timer);
timer = setInterval(decrement, 1000);
}
function decrement() {
seconds--;
$("#timer").html("<h2>" +"Time Remaining: " + seconds + "</h2>");
}
// Stop function
function stop() {
clearInterval(timer);
}
// When seconds hit zero
if (seconds === 0) {
stop();
alert("Time's Up!");
}
Your problem is that your if statement is run once, but it isn't ever checked again, and then never run again. If you move the if statement into your decrement function you should be good as gold.
The function might look something like,
function decrement() {
seconds--;
if (seconds === 0) {
stop();
alert("Time's Up!");
}
$("#timer").html("<h2>" +"Time Remaining: " + seconds + "</h2>");
}

SetTimeout and ClearTimeout (Doesn't clear at 0)

Maybe just sleep deprivation, but I can not understand what I'm doing wrong.
I'm calling a countDown function onLoad with setInterval.
Inside the countDown function I call clearTimeout when the number reaches 0 except it's called when it reaches 2.
What am I doing wrong?
Here's a snippet.
var interval, count = 5;
countDown()
interval = setInterval(countDown, 1000);
function countDown() {
document.body.innerHTML = count
count--
if(count === 0) {
clearInterval(interval)
document.body.innerHTML = "Redirecting to ....."
}
}
function countDown() {
document.body.innerHTML = count;
if(count === 0) {
clearInterval(interval)
document.body.innerHTML = "Redirecting to .....";
} else {
count--;
}
}
This is because you are decreasing the counter first and then evaluating, due to this 1 step is missed
var interval, count = 5;
countDown();
interval = setInterval(countDown, 1000);
function countDown() {
if(count === 0) {
clearInterval(interval)
document.body.innerHTML = "Redirecting to ....."
}
else
{
document.body.innerHTML = count
count--
}
}
Just put the count-- after the if statement, and a return; at the end of the if statement if you want to block the execution after that.
var interval, count = 5;
countDown()
interval = setInterval(countDown, 1000);
function countDown() {
document.body.innerHTML = count;
if(count === 0) {
clearInterval(interval);
document.body.innerHTML = "Redirecting to .....";
return;
}
count--
}

Making a timer with code that can easily be reset

I'm making a shot clock for my school's basketball team. A shot clock is a timer that counts down from 24 seconds. I have the skeleton for the timer right now, but I need to have particular key bindings. The key bindings should allow me to rest, pause, and play the timer.
var count=24;
var counter=setInterval(timer, 1000);
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML=count + " secs";
}
I'm not sure what you meant by "rest" the timer, I interpret this as "pause", so:
Space = Pause / Play.
R = Reset.
var
count=24,
counter = setInterval(timer, 1000),
running = true;
function timer() {
count -= 1;
if (count <= 0) {
clearInterval(counter);
}
document.getElementById("timer").innerHTML = count + " secs";
}
window.addEventListener("keydown", function(e) {
switch(e.keyCode) {
case 32: // PLAY
running ? clearInterval(counter) : counter = setInterval(timer, 1000);
running = !running;
break;
case 82: // RESET
clearInterval(counter);
document.getElementById("timer").innerHTML = 24 + " secs";
count = 24;
running = false;
}
});
<div id="timer">24 secs</div>
I am not able to comment yet, but I recommend checking out this post Binding arrow keys in JS/jQuery
The linked post explains how to bind arrow keys using js/jquery. Using http://keycode.info/ you can find out the keycodes of your desired keys and replace the current values then continue to build your code from there.
Here is my code sample: http://codepen.io/anon/pen/vLvWJM
$(document).ready(function() {
var $timer = $('#timer');
var $timerStatus = $('#timerStatus');
var timerValue = 24;
var intervalId = null;
var timerStatus = 'stopped';
if(!$timer.length) {
throw 'This timer is missing a <div> element.';
}
$(document).keydown(function(k) {
if(k.which == 80) {
if(timerStatus === 'playing') {
clearInterval(intervalId);
timerStatus = 'stopped';
updateTimerStatus();
return;
}
intervalId = setInterval(function() {
playTimer();
timerStatus = 'playing';
updateTimerStatus();
}, 1000);
} else if(k.which == 82) {
clearInterval(intervalId);
resetTimer();
updateText();
timerStatus = 'stopped';
updateTimerStatus();
}
});
function playTimer() {
if(timerValue > 0) {
timerValue--;
updateText();
}
}
function resetTimer() {
timerValue = 24;
}
function updateText() {
$timer.html(timerValue);
}
function updateTimerStatus() {
$timerStatus.html(timerStatus);
}
});
<div id="timerStatus">stopped</div>
<div id="timer">24</div>

adding wait for a loop in javaScript

I wanna run a loop in javaScript like this
for (conditions) { do something; wait for a second
}
How to make the portion of the condition typed in bold (delaying the condition for a second) ?
timeTillWarning = 10;
setTimeout(looping, 1000);
function looping() {
if (count > 0) {
count--;
setTimeout(looping, 1000);
}
}
var i = 100;
var interval = setInterval(function () {
// do something
i--;
if (i == 0) clearInterval(interval);
}, 1000);

Categories