javascript clearInterval() function is not working - javascript

var a = 0;
window.addEventListener("keydown", function(e) {
clearInterval(interval) //this dont work
var interval = setInterval(function() { //this is good
if (a == 0) {
console.log(a);
a = 10;
} else if (a == 10) {
console.log(a);
}
}, 120)
})
//I want when user press key interval stop , than new interval start again but old interval cant stop

You have two problems.
You have var interval inside your function so it gets reset every time the function runs.
setTimeout will call a function, once, after a time period. It won't clear an interval, you need clearInterval for that.

Related

clearTimeout not working: parameter undefined(even though it's defined in the global scope)

My setTimeout() function works, but my clearTimeout() is not working. Even though I have an 'if' statement that's supposed to run the clearTimeout function once my variable 'secs' is less than 0, the timer keeps counting down into negative numbers. When I type my variable name, 'secs' into the console, I get undefined, even though it's defined as a parameter in the function called by my setTimeout. I don't know what I'm doing wrong. Can anyone help, please?
My full code is at https://codepen.io/Rburrage/pen/qBEjXmx;
Here's the JavaScript snippet:
function startTimer(secs, elem) {
t = $(elem);
t.innerHTML = "00:" + secs;
if(secs<0) {
clearTimeout(countDown);
}
secs--;
//recurring function
countDown = setTimeout('startTimer('+secs+',"'+elem+'")', 1000);
}
Add a condition to call recursive function like below.
if (secs < 0) {
secs = secsInput;
}
//recurring function
countDown = setTimeout('startTimer('+secs+',"'+elem+'")', 1000);
For a countdown timer, I would recommend using setInterval and clearInterval instead. setInterval will repeatedly run the callback function for you. It might look like this:
let countdown;
function startTimer(secs, elem) {
countdown = setInterval(function(){
t = $(elem);
t.innerHTML = "00:" + secs;
secs--
if (secs < 0) {
clearInterval(countdown);
}
}, 1000);
}
By the time you call clearTimeout(countDown), countDown refers to the previous timeout, that already timed out. It will not stop the one yet to start. You could just not re set the timeout, like
if(!/*finished*/) setTimeout(startTimer, 1000, secs, elem);
In your case, it's more convenient to use setInterval and clearInterval.
To keep the setTimeout and clearTimeout functions, you should add return in the if statement.
function startTimer(secs, elem) {
t = $(elem);
t.innerHTML = "00:" + secs;
if(secs<0) {
clearTimeout(countDown);
return;
}
secs--;
//recurring function
countDown = setTimeout('startTimer('+secs+',"'+elem+'")', 1000);
}
So there are 4 events in my opinion that will have to be addressed by the timer:
The quiz starts
The quiz ends
The timer runs out
The player answers a question
This can be solved by a function returning an object with some options.
The createTimer can be used to set the parameters for the timer.
Point 1. would be timer.start() --> will start a timer with the parameters
Point 3. can be addressed with the callback that will be called if the timer runs out --> createTimer(5,'display', ()=>{ // your code goes here })
Point 2. can be achieved with --> timer.stop()
Point 4. is needed when the timer needs to be reset without running out timer.reset()
Further on the interval is not in the global scope so you could have multiple timers with different settings and they wouldn't interfere with each other
// function for creating the timer
function createTimer(seconds, cssSelector, callbackOnTimeout) {
// interval the timer is running
let interval;
// the html node where innerText will be set
const display = document.getElementById(cssSelector)
// original seconds passt to createTimer needed for restart
const initSec = seconds
// starting or continuing the interval
function start() {
// setting interval to the active interval
interval = setInterval(() => {
display.innerText = `00:${seconds}`;
--seconds;
if (seconds < 0) {
// calling restart and callback to restart
callbackOnTimeout()
restart()
}
}, 1000);
}
// just stopping but not resetting so calling start will continue the timer
// player takes a break
function stop(){
clearInterval(interval)
}
// opted for a restart and not only a reset since it seemed more appropriate for your problem
function restart(){
clearInterval(interval)
seconds = initSec
start()
}
// returning the object with the functions
return {
start: start,
stop: stop,
restart: restart
}
}
// example for creating a timer
const timer1 = createTimer(5,'display',()=>{
console.log(`you where to slow ohhh...`)
})
// calling the timer
timer1.start()

Using setInterval to Save Form Every 60 Seconds Not Working

I'm working on some code that'd I'd like to have each loop run every 60 seconds, but currently each loop runs immediately. The purpose of the code it to see if a form has changed, and if it has save the form. Do I have setInterval setup incorrectly?
function saveHelper(formId) {
for(var i = 0; i < 4; i++) {
save(formId);
}
}
function save(formId) {
console.log('might save');
var changed = formChanges(formId);
var intId = setInterval(stall, 60000);
if(changed.length > 0) {
console.log('would save');
//document.getElementById(formId).submit();
}
clearInterval(intId);
}
function stall() {
return true;
}
You are treating interval as some sort of synchronous sleep method, which is not the case. The change code should be inside of the setInterval, it should not live after the interval.
var intId = setInterval(function () {
if(changed.length > 0) {
console.log('would save');
//document.getElementById(formId).submit();
}
}, 60000);
setInterval doesn't pause your code, it just schedules some code to be run some time in the future. For example, when you do this:
var intId = setInterval(stall, 60000);
That says "every 60000 milliseconds, run the function stall". As soon as this line of code completes, it will immediately run your next line of code, do the saving, then clear the interval. Clearing the interval cancels it, so now nothing will happen in 60000 milliseconds.
Instead, you'll want to do something like this:
function saveHelper(formId) {
let count = 0;
const intId = setInterval(function () {
if(changed.length > 0) {
console.log('would save');
//document.getElementById(formId).submit();
}
count++;
if (count === 4) {
clearInterval(intId);
}
}, 60000);
}
Every 60000 milliseconds, the inner function will run, and do the saving. After saving, it checks how many times we've done this, and once it reaches 4, it clears the interval to stop it from happening any more.

Can someone tell me why one of these JavaScript code works and one doesn't?

I want the animation to stop when the number of clicks reach certain number.
Why the first snippet works, and the second one doesn't.
The only difference is where clearInterval is called.
This one works --- stops the animation.
var intervalId = setInterval(moveHeading, intervalLength);
var intervalLength = 120;
var clicks = 0;
$("#heading").click(function () {
clearInterval(intervalId);
clicks++;
intervalLength /= 2;
if (clicks >= 3) {
$("#heading").text("You Win!");
} else {
$("#heading").text(clicks);
intervalId = setInterval(moveHeading, intervalLength);
}
});
However this one one won't work --- doesn't stop animation.
var intervalId = setInterval(moveHeading, intervalLength);
var intervalLength = 120;
var clicks = 0;
$("#heading").click(function () {
clicks++;
intervalLength /= 2;
if (clicks > 3) {
clearInterval(intervalId);
$("#heading").text("You Win!");
} else {
$("#heading").text(clicks);
intervalId = setInterval(moveHeading, intervalLength);
}
});
On the first one, you clearInterval, then overwrite intervalId when you call setInterval, so you will never have a setInterval that is still running, where you no longer know the intervalId.
On the second one, if clicks <= 3, then you will overwrite intervalId, but you never cleared the running setInterval, so it will continue to run, and you will never be able to clearInterval on it since you don't know it's id (you will just be able to clear the interval for whatever new interval you created).
The setInterval() method will execute the function once every 1 second, just like a digital watch.
we have to use clearInterval() to stop the time.
It clears a timer set with the setInterval() method.
You must have to use it, in order to stop your animations.

javascript timer counting very fast as time passes

I want a counter which reset in specific interval of time. I wrote this code. When I refresh the page it is executing perfectly. But as time passes the timer goes really fast, skipping seconds. Any idea why this is happening.
function countdown_new() {
window.setInterval(function () {
var timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter) - eval(1);
$("b[id=show-time]").html(updateTime);
if (updateTime == 0) {
//window.location = ("ajax_chart.php");
$("b[id=show-time]").html(5);
clearInterval(countdown_new());
// countdown_new();
//my_ajax();
}
}, 1000);
}
window.setInterval(function () {
countdown_new();
}, 5000)
HTML
Coundown in 5 seconds
The issue is because you are not clearing the previous timer before starting a new one, so you start a new one for each iteration. To clear the timer you should save a reference to it, and pass that to clearInterval, not a function reference.
Also, note that your pattern of using multiple intervals for different operations can lead to overlap (where two intervals are acting at the same time and cause odd behaviour). Instead, use setTimeout for the initial 5 second delay and then chain further calls to stop this overlap.
Try this:
var timer;
function countdown_new() {
timer = setInterval(function () {
var $showTime = $("#show-time")
var updateTime = parseInt($showTime.text(), 10) - 1;
$showTime.html(updateTime);
if (updateTime == 0) {
$showTime.html('5');
clearInterval(timer);
setTimeout(countdown_new, 5000);
}
}, 1000);
}
setTimeout(countdown_new, 5000);
Example fiddle
Note that you should use the # selector to select an element by its id attribute, and you should never use eval - especially not for type coercion. To convert a value to an integer use parseInt().
You are calling window.setInterval(), which schedules a function call to countdown_new() ever 5 seconds without stop.
Compounding the problem, you are calling countdown_new() again inside your clear interval.
You need to call setInterval just once to continuously execute a function every 5 seconds.
If you want to cancel an interval timer, you need do to this:
var intervalObj = setInterval(function() { ... }, 5000);
clearInterval(intervalObj);
Yes clearinterval does the trick.
function countdown_new(){
t = window.setInterval(function() {
var timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter)- eval(1);
$("b[id=show-time]").html(updateTime);
if(updateTime == 0){
//window.location = ("ajax_chart.php");
$("b[id=show-time]").html(5);
clearInterval(t);
// countdown_new();
my_ajax();
}
}, 1000);
}

SetInterval/ClearInterval loop not functioning correctly

I know this question has been answered before, but none of the other answers seemed to quite solve my problem. I have a timer function that, on invocation, should use setInterval to run every second for 5 seconds and then stop. This works once, but clearInterval doesn't seem to be working, since the second half of the countdown loop keeps running. I feel like this is a scope error, but I've tried moving setInterval and clearInterval outside the function with no luck. Here's my code - this function is called on a button click:
var startGame = function(){
var count = 5;
var countdownTimer = function(){
setInterval(countdown, 1000);
};
var countdown = function(){
if (count > 0){
console.log('inside counter loop');
count--;
$('.timer').text('0:' + count);
} else {
clearInterval(countdownTimer);
console.log('inside endGame loop');
//endgame(); //This should run once when the timer reaches 0.
}
};
countdownTimer();
};
Right now, the loop will run correctly once, and then console.log 'inside endGame loop' every second without resetting. I want the loop to run once, stop, and then wait to be restarted until the on click handler calls the function again.
setInterval() returns the interval id you need to store it and use that with clearInterval()
var startGame = function() {
var count = 5;
var intervalID ;
var countdownTimer = function() {
//Store the intervalID
intervalID = setInterval(countdown, 1000);
};
var countdown = function() {
if (count > 0) {
console.log('inside counter loop');
count--;
$('.timer').text('0:' + count);
} else {
if (intervalID) {
//Pass currect pointer
clearInterval(intervalID);
}
}
};
countdownTimer();
};

Categories