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?

Use `(index + 1) * 1000` instead of `1000` – Satpal May 20 '14 at 09:42 — Satpal, May 20 '14 at 09:42

jAndy · Accepted Answer · 2014-05-20T09:59:01.530

4

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 );
     }
}());

edited May 20 '14 at 09:59

answered May 20 '14 at 09:43

jAndy

231,737
57
305
359

you are right, i simply condensed all the timeouts after the 1st second. Thanks! – Matteo Bononi 'peorthyr' May 20 '14 at 09:46

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

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:

edited May 23 '17 at 12:29

Community

1
1

answered May 20 '14 at 09:43

long.luc

1,191
1
10
30

2

I think you've misread the question. The issue is that the timeouts all fire at the same time. – Evan Trimboli May 20 '14 at 09:44
Sorry, I forgot to add the index to interval time :| – long.luc May 20 '14 at 09:44
But without using clousre, I am sure the `value` in log is wrong. – long.luc May 20 '14 at 09:45
1

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. – jAndy May 20 '14 at 09:59
Yep, I've just realized that. Thank you! – long.luc May 20 '14 at 10:00

delay $.each() function with setTimeout

2 Answers2