I'm confused with using setTimeout and the each iterator. How can I rewrite the following so that the console outputs each name after a delay of 5 seconds? Currently the code below prints all the names at once after 5 seconds. I would like to:
wait 5 seconds, then print kevin
wait 5 seconds, then print mike
wait 5 seconds, then print sally
var ary = ['kevin', 'mike', 'sally'];
_(ary).each(function(person){
setTimeout(function(){ console.log(person); }, 5000);
});
setTimeoutclearIntervalHere's each one of those fleshed out with a working example:
setTimeoutA 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)
setTimeout + conditional recursionFor 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)
setInterval + conditional clearIntervalNOTE: 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)
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:
<!-- language: lang-js -->clearInterval(inter);