This question already has answers here:
Stop setInterval call in JavaScript
(7 answers)
Closed 3 years ago.
I found this javascript and it starts a new count down after finished in a loop
<script>
var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 10;
countdownNumberEl.textContent = countdown;
setInterval(function() {
countdown = --countdown <= 0 ? 10 : countdown;
countdownNumberEl.textContent = countdown;
}, 1000);
</script>
SetInterval returns a unique ID.
var intervalId = setInterval( function(){}, 1000);
so, when you want it to stop, you will just call clearInterval(intervalId)
If you want to call it in the function itself, you need to just have the correct conditional to monitor when you want it to stop it you would need to reference the global or scoped identifier.
In your example, you are using a countdown variable.
So you can say something like:
if (countdown <= 0) clearInterval(intervalId);
Related
This question already has answers here:
Why does the setInterval callback execute only once?
(2 answers)
Closed 4 years ago.
i need to show current time in html code, but the javascript code only work once?
$(document).ready(function () {
function updateClock(ele){
var current_time = new Date();
var current_time_str = current_time.toLocaleTimeString();
ele.text(current_time_str);
console.log(current_time_str);
}
setInterval(updateClock($('#clock')) , 1000 );
})
It's work different some others languages like C,Object-C or Python, it's so misleading for me.
You need to wrap the calling part in a function, because it is called only once and returns undefined as calling value.
setInterval(() => updateClock($('#clock')), 1000);
Another possibillity is to use the third and following arguments of setInterval
setInterval(updateClock, 1000, $('#clock'));
Put the updateClock inside setInterval callback function
$(document).ready(function() {
function updateClock(ele) {
var current_time = new Date();
var current_time_str = current_time.toLocaleTimeString();
ele.text(current_time_str);
}
setInterval(function() {
updateClock($('#clock'))
}, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clock"></div>
This question already has answers here:
Why does the setInterval callback execute only once?
(2 answers)
Closed 6 years ago.
function updateCounter(){
console.log(delay);
delay = delay - 1000;
$('#counter-value').html(delay / 1000);
if(delay <= 0){
clearInterval(loopID);
}
}
var delay = 5000;
var loopID = setInterval(updateCounter(), 1000);
I don't understand why it doesn't work, could someone help me? I've looked many things but couldn't end up making it. :(
You need to pass the function name or reference--remove ()
var loopID = setInterval(updateCounter, 1000);
This question already has answers here:
In JavaScript, how can I access the id of setTimeout/setInterval call from inside its event function? [closed]
(2 answers)
Closed 6 years ago.
Is it possible to send interval id to executing function as an argument ? For example some thing like this:
var id= setInterval(myFunc.bind(null,id),1000);
What I am going to do is that in myFunc I want to do some processing and clear interval if I need. I can't use global variable because it will be happened multiple time. And I know that I can use global array but it would a little a bit of time consuming because of my function logic. So I want to know if I can pass interval id as an argument to myFunc.
EDIT:
this stackOverfllow link dosen't help me because there were no helpful answer.
I use this pattern:
function myFunc(host){
console.log(host.id);
}
var host = {};
host.id = setInterval(myFunc.bind(null,host),1000);
You could actually try mixing up setTimeout and setInterval to accomplish what you are looking for.
you could read more about setInterval on how to pass additional parameters to the functions.
var interval = 0;
function logId(param) {
interval++;
if (interval === 3) {
clearInterval(param);
}
console.log(param);
}
var id = setInterval(function() {
setTimeout(logId, 0, id)
}, 1000);
You can create your own function to store your callback function and interval id in the same object and pass that object to your interval function which will call the provided function with the interval id.
function setMyInterval(f,t) {
var handleMyInterval = function(ob) {
ob.func(ob.id);
};
var idOb = {func: f};
idOb.id = setInterval(handleMyInterval,t,idOb);
return idOb.id
}
You can use function inside you interval so you can do like this.
Create a function that will do interval and clear itself after a time you set.
intervalTime is time for loop interval and timeout is the time to clear interval loop.
both receive in millisecond.
function test(intervalTime,Timeout,log){
var id = setInterval(function(){
console.log(log)
},intervalTime);
setTimeout(function(){
clearInterval(id);
}, Timeout);
}
test(1000,10000,'test1');
test(1000,1000,'test2');
This question already has answers here:
Cancel/kill window.setTimeout() before it happens
(2 answers)
Closed 7 years ago.
I have a function that functions as a countdown timer for a simple pomodoro clock I'm building. Now I want to stop this function when the user clicks a reset function. I though I'd pass it a simple if statement that returns something and therefore terminates the function before the countdown iterates again but the function keeps on going. Any idea what's going on here is appreciated. Code below, can also check the whole thing on codepen.
function countdown(blocker) {
if (blocker === true) {
return true;
}
else {
setTimeout(function() {
time -= 1;
updateTimer();
if (time > 0) {
countdown();
}
}, 1000);
}
}
calling the function like this doesn't stop it once it gets going:
countdown(true);
Don't need to use setInterval, as suggested by K ะค, But you do need to clear the timeout with clearTimeout. Make sure you store a reference to your timeout object:
timeout = setTimeout(/* arguments */);
And add a reset function and use it when resetting:
function reset () {
if(timeout)
clearTimeout(timeout);
time = 1500;
}
Here's your Pen updated.
Use setInterval with clearInterval.
var si = -1;
var countdown = function() {
si = setInterval(function() {
time -= 1;
updateTimer();
if (time <= 0) {
clearInterval(si);
}
}, 1000);
};
//Where button is the reference to a button existing in your html page
button.onclick = function() {
clearInterval(si);
//reset info here
timer = 2000;
countdown();
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to wait for a period of time after a function run
here is a sample of the code:
run1();
// delay 1 sec
run2();
// delay 1 sec
run3();
No, it is asynchronous things in browser, which allows to prevent delays in working with it by users. You may only use timeouts and callbacks.
For your proposes you may organize something like a queue:
var cur = 0;
var functions = [run1, run2, run3, ...];
var next = function () {
functions[cur]();
cur += 1;
if (cur == functions.length) clearInterval(interval);
};
var interval = setIntervar(next, 1000);
Use the setTimeout() function which allows you to delay x number of milliseconds before executing code.
e.g.
run1();
setTimeout(function() {
run2();
setTimeout(run3, 1000);
}, 1000);