setTimeout and array each
You could create a variable called offset
that makes the timer wait 5 seconds more for each person in the array, like so:
var ary = ['kevin', 'mike', 'sally'];
var offset = 0;
_(ary).each(function(person){
setTimeout(function(){
console.log(person);
}, 5000 + offset);
offset += 5000;
});
You have three basic options:
- For Loop +
setTimeout
... initialize everyone immediately, but stagger the start times based on the index position so they don't all go at the same time. setTimeout
+ conditional recursion
... check back in every n seconds - and I'll tell you if you need to do anothersetInterval
+ conditionalclearInterval
... keep running every n seconds - until I tell you to stop
Here's each one of those fleshed out with a working example:
1. For Loop + setTimeout
A couple notes on this one. This is kind of like starting a relay race and handing out instructions ahead of time to each runner to start at precisely 5:00 and 5:02 and 5:04, regardless of whether the person behind them finished a long time ago or hasn't yet arrived.
Also, you can't use a regular for i=0 loop
, because the for operator does not define new function scope. Thus object values set within each for loop will apply across iterations. By the time setTimeout is called, it will only use the most recent value. So we need a closure to store the value within each loop. I've used Array.prototype.forEach()
, but if you want to use the forEach implementations in jQuery or Underscore, that'll work too.
function ArrayPlusDelay(array, delegate, delay) {
// initialize all calls right away
array.forEach(function (el, i) {
setTimeout(function() {
// each loop, call passed in function
delegate( array[i]);
// stagger the timeout for each loop by the index
}, i * delay);
})
}
// call like this
ArrayPlusDelay(['a','b','c'], function(obj) {console.log(obj)},1000)
2. setTimeout
+ conditional recursion
For the bottom two options, we're making our own loops, so we'll have to keep track of the index ourselves, initializing at zero and incrementing throughout.
For this one, we'll a) call setTimeout
which will run once, b) evaluate the array at the index position, c) check if there are more elements in the array and if so, start over at (a).
function ArrayPlusDelay(array, delegate, delay) {
var i = 0
function loop() {
// each loop, call passed in function
delegate(array[i]);
// increment, and if we're still here, call again
if (i++ < array.length - 1)
setTimeout(loop, delay); //recursive
}
// seed first call
setTimeout(loop, delay);
}
// call like this
ArrayPlusDelay(['d','e','f'], function(obj) {console.log(obj)},1000)
3. setInterval
+ conditional clearInterval
NOTE: The function setInterval
will run forever once called. It's return value when initially set will provide a reference to the interval, so it is often combined with the function clearInterval
to optionally shut it off down the road
function ArrayPlusDelay(array, delegate, delay) {
var i = 0
// seed first call and store interval (to clear later)
var interval = setInterval(function() {
// each loop, call passed in function
delegate(array[i]);
// increment, and if we're past array, clear interval
if (i++ >= array.length - 1)
clearInterval(interval);
}, delay)
}
ArrayPlusDelay(['x','y','z'], function(obj) {console.log(obj)},1000)
3* Secret Fourth Option (Best One)
Options 1 & 2 are risky because, once you set off that train, there's no way to call it off down the road (save closing the browser). If you have a large array or a heavy load in your delegate, it might be nice to provide some recourse if you need it. By saving the reference from setInterval
, we'll have constant access to the iterating function. We just need to return the interval object above and save it when calling our array plus delay function.
function ArrayPlusDelay(array, delegate, delay) {
var i = 0
// seed first call and store interval (to clear later)
var interval = setInterval(function() {
// each loop, call passed in function
delegate(array[i]);
// increment, and if we're past array, clear interval
if (i++ >= array.length - 1)
clearInterval(interval);
}, delay)
return interval
}
var inter = ArrayPlusDelay(['x','y','z'], function(obj) {console.log(obj)},1000)
Then if we ever want to clear it later on, just throw this in the console:
clearInterval(inter);
All 3 Demos in jsFiddle
Similar Stack Overflow Questions:
- Using settimeout() with a loop
- Stepping through array with time delay
- Loop over array but with a time delay
You could do
var ary = ['kevin', 'mike', 'sally'];
_(ary).each(function(person, index){
setTimeout(function(){
console.log(person);
}, index * 5000);
});
Without increasing the timeout
value, you would initialize all setTimeouts
with the exact same value (thats why you see what you see).