jQuery 使用 .each() 更新元素

发布于 2024-09-11 08:26:41 字数 479 浏览 3 评论 0原文

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/

原文

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/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

城歌 2024-09-18 08:26:41

将 }, 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);

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

回复收藏 0 原文

~没有更多了~