使用.each()的jQuery更新元素

Question

HTML代码:

div id="updatePanel">?

jQuery代码:

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

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

我希望updatePanel div内容每5秒更新一次.它应该是1然后等待5秒,显示2,等待另外5秒......

它不像我期望的那样工作.它等待5秒钟并显示9.

请参阅此处的演示:http: //jsfiddle.net/vc7qB/4/

Answer 1

更改}, 5000 );到}, 5000*index );

这将使每个项目比以前更多等待5秒...

请记住,所有超时都是在同一时间创建的,但延迟时间不同.

最好从单个超时开始,每次执行时创建下一个超时.

像这样

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