delay $.each() function with setTimeout

Question

Good day all.

I have this simple code:

totalTextArray = textForChatWithSeparators.split("#"); 
 $.each(totalTextArray, function( index, value ) { 
 setTimeout(function(){console.log( value )},1000);
});

I expect to see in the console log, every second, the "value" logged, but instead I see all the log coming out in one block, after the delay of 1 second.

what i'm doing wrong? I'm thinking of the fact that a function inside the function could lead to some buffering problem?

• Satpal: Use (index + 1) * 1000 instead of 1000

Answer 1

What you're doing is

• make a call to setTimeout n times
• all timeouts will fire after 1000ms together

What you would need to do if you don't want to change the structure is to increase the timeout value per iteration, like

setTimeout(function(){ console.log( value ) },1000*index);

A probably more elegant (and more correct way imo), would be to change the structure of the loop all together. Using an interval-timer like

(function _loop( elem ) {
 console.log( elem ); 
 if( totalTextArray.length ) {
 setTimeout( _loop.bind( null, totalTextArray.shift() ), 1000 );
 }
}());

• Matteo Bononi 'peorthyr': you are right, i simply condensed all the timeouts after the 1st second. Thanks!

Answer 2

All you need is closure:

totalTextArray = textForChatWithSeparators.split("#");
$.each(totalTextArray, function(value, index) {
 setTimeout(function() {
 console.log(value);
 }, 1000 * (index + 1));
});

EDIT: I add more links about closure:

• How do JavaScript closures work?
• http://en.wikipedia.org/wiki/Closure_(computer_programming)

• Evan Trimboli: I think you've misread the question. The issue is that the timeouts all fire at the same time.
• long.luc: Sorry, I forgot to add the index to interval time :|
• long.luc: But without using clousre, I am sure the value in log is wrong.
• jAndy: No, in this case since we already have a function-loop, we don't need to create another context. The anonymous loop function itself will create a new one per iteration.
• long.luc: Yep, I've just realized that. Thank you!