Question

HTML code:

div id="updatePanel">​

jQuery code:

var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

$.each(data, function(index, value) {
  setTimeout(function(){ 
     $('#updatePanel').text(index);     
  }, 5000 ); 
}); 

I want the updatePanel div content to be updated every 5 seconds. It should be 1 then wait 5 seconds, display 2, wait for another 5 seconds……

It doesn’t work like what i expected. It waits for 5 seconds and display 9.

See the demo here:
http://jsfiddle.net/vc7qB/4/

Answer 1

Change the }, 5000 ); to }, 5000*index );

This will make each item to wait 5 seconds more than the previous …

Keep in mind that all the timeouts get created at the same time, but with different delay times..

It would be better to start with a single timeout and at each execution create the next one ..

like this

var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    function update(idx){
        setTimeout(function(){
        $('#updatePanel').text( data[idx] );
        if (idx < data.length - 1)
            update(idx+1);
        },1000);
    }

update(0);