How to skip a one step in jquery setInterval function
e.g
<script>
// start updating continuously
var timer, delay = 3000; // time in milli seconds
timer = setInterval(function(){
// do something for each iteration
// I want to do this only once
if(result["pass"]){
$("#test").append("<li>Passed</li>");
}
// do something for each iteration
}, delay);
</script>
how can I skip one or more than one steps to happen if they are happened once.
I want to skip only when it happens once. e.g if the condition is true in 101st iteration then it will not happen in first 100 iterations but if condition is still true in 102nd iteration, it should not happen because it happens in 101st iteration.
Any help would be much appreciated.
<script>
// start updating continuously
var timer, delay = 3000; // time in milli seconds
var alreadyAdded=false;
timer = setInterval(function(){
// do something for each iteration
// I want to do this only once
if(!alreadyAdded && result["pass"]){
$("#test").append("<li>Passed</li>");
alreadyAdded=true;
}
// do something for each iteration
}, delay);
</script>
This is a good example of where you can use a closure. You can create a function that returns a function.
This allows you to declare a variable in the scope of the outer function, which can then be accessed by the inner function.
function getIntervalHandler() {
var hasPassed = false;
return function() {
if(!hasPassed) {
if(result["pass"]){
$("#test").append("<li>Passed</li>");
hasPassed = true;
}
}
};
}
timer = setInterval(getIntervalHandler(), delay);
Related
So from what I have understood, setInterval() is used to call a function on repeat on regular intervals.
So basically it is a loop that executes a function forever periodically.
I am confused as to if I had to stop this execution at one point what would be the way to do it
for eg I am trying to print the message "hey" 3 times after 1 second each, but somehow it is printing it 3 times every second and is going on forever.
What can I do to stop it after a set number of times.
This is the code that I've been trying
var i = 3;
function message() {
console.log("hey");
}
while(i > 0) {
setInterval(message, 1000);
i = i - 1;
}
Your code is executing the setInterval thrice in the while loop, which is not needed.
Actually, setInterval does not work as a function call but actually registers a function to be called at some interval.
The setInterval() method will continue calling the function until clearInterval() i.e it is deregistered or the process is killed.
It should work like this
var i = 3;
var interval = setInterval(message, 1000);
function message() {
if (i === 0) {
clearInterval(interval);
}
console.log("hey");
i = i - 1;
}
To clear a setInterval, use global clearInterval method.
Example:
var timerId = setInterval(func, 500);
.... some code here....
clearInterval(timerId);
What can I do to stop it after a set number of times.
usually you don't use setInterval() for this, you use setTimeout().
Something like
var counter = 0;
function message() {
console.log("hey");
// we trigger the function again after a second, if not already done 3 times
if (counter < 3) {
setTimeout(message, 1000);
}
counter++;
}
// initial startup after a second, could be faster too
setTimeout(message, 1000);
The setInterval function calls the function indefinitely, whereas setTimeout calls the function once only.
Simply use clearInterval once the count runs out.
var i = 3;
function message(){
console.log("hey");
if (--i < 0) {
clearInterval(tmr);
}
}
var tmr = setInterval(message, 1000);
you have to assign that setInterval to a javascript variable to name it what for this setInterval, like this
var messageLog = setInterval(message, 1000);
After, in setInterval message function add this condition to clear the inverval whenever you want to clear.
function message(){
if(i>3) {
clearInterval(messageLog); // clearInterval is a javascript function to clear Intervals.
return null;
}
console.log("hey");
}
You can retrieve the timer when creating and clear it if needed.
var i=3;
var timer = setInterval(message,1000);
function message(){
console.log("hey");
i—-;
if(i==0)
clearInterval(timer)
}
a beginner here too,look for clearInterval method ...
I am trying to get a function to run 10 times with a pause inbetween each run, yet when I try to it repeats the function infinite times then after 10 times it pauses, and so on. Right now this is the code with the problem:
for(i=0;i<10;i++) {
console.log(i);
interval = setInterval(function() {console.log("Function ran");}, 1000);
}
window.clearInterval(interval);
Console:0123456789Function ran["Function ran" is repeated infinite times after "9"]
interval = setInterval(function() {console.log("Function ran");}, 1000);
This line creates a new interval-instance each time, which means you have created 10 intervals. At the end of the loop interval holds the id of the last interval that was created. Hence that's the only one you're clearing, and the other ones are still running.
To cancel the interval, you need to keep track of how many times the function has been invoked. One way you can do that is as follows:
function pauseAndRepeat(delay, iterations, func) {
var i = 0;
var interval = setInterval(function() {
func();
if(++i === iterations) {
clearInterval(interval);
}
}, delay);
}
Here we have a function that defines a counter (i) in its local scope. Then it creates an interval using a function that checks the counter to see if it should call your function (func) or clear the interval when it is done. interval will have been set when the interval-handler is actually called. In this case the handler is basically a closure since it is bound to the local scope of pauseAndRepeat.
Then you can invoke the function as follows:
pauseAndRepeat(1000, 10, function() {
console.log("Function ran");
});
This will print out Function ran ten times, pausing for a second each time.
setInterval is expected to run forever, on an interval. Every time you call setInterval here, you have a new infinite loop running your function every 10s, and as others have noted you only are canceling the last one.
You may do better with chained setTimeout calls:
var counter = 0;
function next() {
if (counter < 10) {
counter++;
setTimeout(function() {
console.log("Function ran");
next();
}, 1000);
}
}
next();
This chains delayed functions, setting a timeout for the next one after each runs. You can do something similar with setInterval and cancellation:
var counter = 0;
var intervalId = setInterval(function() {
console.log("Function ran");
if (++counter >= 10) {
clearInterval(intervalId);
}
}, 1000);
In both these cases the key issue is that you trigger the next run or cancel the interval within the callback function, not in synchronous code.
Just like continue is used to break current iteration and proceed with the next, how can I break current iteration within setInterval() in JavaScript and proceed with the next interval without waiting?
var intervalID = window.setInterval( function() {
if(conditionIsTrue) {
// Break this iteration and proceed with the next
// without waiting for 3 seconds.
}
}, 3000 );
You could "simply" (or not so simply) clear the interval, and re-create it:
// run the interval function immediately, then start the interval
var restartInterval = function() {
intervalFunction();
intervalID = setInterval(intervalFunction, 3000 );
};
// the function to run each interval
var intervalFunction = function() {
if(conditionIsTrue) {
// Break this iteration and proceed with the next
// without waiting for 3 seconds.
clearInterval(intervalID);
restartInterval();
}
};
// kick-off
var intervalID = window.setInterval(intervalFunction, 3000 );
Here's a demo/test Fiddle.
Just tested this, and it acts as a continue statement in a loop. For fellow coders finding this now, just use return within the setInterval.
var myRepeater = setInterval( function() {
if(conditionIsTrue) {
return;
}
}, 1000 );
EDIT: To comply with the immediate execution after breaking the current execution of the loop, one could instead do something like so (in theory. And beware of recursion issues if conditionIsTrue stays true):
function myFunction() {
if(conditionIsTrue) {
myFunction();
return;
}
// Interval function code here...
}
var myRepeater = setInterval( myFunction, 1000 );
I need to invoke some function given number of times through given delays. How should I do - declare variable for timer and pass it to invoking function for stopping timer in some moment or in loop (n times) invoke setTimeout once ( or some another approach to skeep delay time once) or other.Thanks.
edit to fix syntax eror
var timerID = null;
var n = 5;
this.timerID = setInterval(function(){
funcToInvoke(n,timerID){
if(invokeNumber == n){
clearInterval(timerID);
return;
}
else { do something}
}
},delay)
Yes, the approach is common and better than calling setTimeout in a loop (with a fixed number of times). It is more performant than that and also more flexible, because the interval will be stopped dynamically (might check for a future condition).
However, your code is a bit messy. Fixed:
// Assuming we a have
// n
// delay
// funcToInvoke
// and execute in context of some object
var that = this,
numberOfInvokes = 0;
this.timer = setInterval(function() {
// "this" points to the global object
if (numberOfInvokes == n)
clearInterval(that.timer);
else
funcToInvoke(numberOfInvokes);
numberOfInvokes++;
}, delay);
Your current method has a syntax problem, you can't have a function parameter like this.timerID). In fact, you should remove the whole funcToInvoke declaration, and declare n and timerID as local variables, so they will be available to the closure. Like this:
// Don't forget to define n here!
var n = 5;
// Change timerID to local var instead of property
var timerID = null;
timerID = setInterval(function(){
if(invokeNumber == n){
clearInterval(timerID);
return;
} else {
//do something
}
// You can setTimeout again anywhere in this function if needed
}, delay);
If you want an approximate delay, setInterval is probably ok. If you want a more precise interval, then repeated calls to setTimeout are better as you can adjust the length of time to the next call based on the time since the last call.
E.g. for a clock ticking every second, you can do repeated calls to setTimeout, setting the lag to just after the next full second.
fourI am writing a javascript for loop and am sure have done a terrible job:
init = function () {
var i = 0;
timer = setInterval(function () {
if (i >= 4) {
clearInterval(timer);
return;
}
for (i = 0; i < 10; i++) {
console.log('init fired');
}
}, 2000);
};
init();
What I want is for the timer to stop after the i variable in the for loop reaches four. Instead the log is showing init fired ten times. What am I doing wrong?
I think you need it like this
var i=0; //Global Declaration
init = function(){
timer = setInterval(function(){
console.log('init fired');
i++;
if(i>4){
clearInterval(timer);
return; }
}, 2000);
};
init();
Hope this solves your problem. This will trigger init() method four times as you have expected and if the i reaches 4 the interval will be cleared.
Every time the timeout handler runs, it starts "i" back at zero.
The problem with your "for" loop is basically that you should not use a "for" loop :-)
Those 10 iterations are happening on the first pass through the function. After that first pass, "i" will be 10 and so the "if" condition will cancel the timeout. However, that "if" check is only made at the beginning of the function, so the loop will always complete 10 iterations.
If you want to have just four iterations of the timer (or five or whatever), you'd just leave off the "for" loop, and add i++; after the console log message. That way, the timer would issue one log output when it runs, and when that's happened the number of times you desire, it will stop.