显示来自 jquery 每个循环的延迟数据

发布于 2024-08-11 23:32:31 字数 414 浏览 5 评论 0原文

我的问题如下：

循环某些 json 数组并显示一些数据的最佳方法是什么就像一秒钟的延迟。

下面的不起作用，因为它只显示一条消息一次而不是 4

jQuery.each(data.user, function(index, itemData) { 


    timerid = setTimeout(function(){showMessage(itemData);}, 1000);
                                                       });

function showMessage(message){
    $('#status_info').html(message);
    clearTimeout(timerid);
}

谢谢，理查德

原文

My question is the following:

What is the best way for looping some json array too show some data with
like a one second delay.

The one below does not work, because it only shows one message once instead of 4

jQuery.each(data.user, function(index, itemData) { 


    timerid = setTimeout(function(){showMessage(itemData);}, 1000);
                                                       });

function showMessage(message){
    $('#status_info').html(message);
    clearTimeout(timerid);
}

thanks, Richard

分享到QQ

分享到微博

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

发布评论

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

小巷里的女流氓 2024-08-18 23:32:31

尝试使用 setInterval 代替：

var i = 0;
window.setInterval(function() {
    $('#status_info').html(data.user[i++]);
    i = i == data.user.length ? 0 : i; // loops the interval
}, 1000);

Try setInterval instead:

var i = 0;
window.setInterval(function() {
    $('#status_info').html(data.user[i++]);
    i = i == data.user.length ? 0 : i; // loops the interval
}, 1000);

回复收藏 0 原文

临风闻羌笛 2024-08-18 23:32:31

如果您想避免 setInterval 并将调用绑定到列表的长度，您可以创建一个自执行函数来保存当前索引，而不是使用闭包中的索引。闭包中的变量最终将始终是每个循环中的最后一个元素，因为循环将在读取 setTimeout 函数中的变量之前完成。

您还调用了clearTimeout 函数，在这种情况下这对我来说没有多大意义。

最重要的是，所有的 setTimeouts 几乎会同时被调用。这将导致所有值在屏幕上以毫秒间隔闪烁（或者在某些情况下太快而无法看到）。循环在这里并不合适，因为 setTimeout 函数是异步的。回调系统最适合有限数量的运行，而 setInterval 系统最适合未知数量的运行。对我来说，你的运行次数应该是你的 jQuery 对象中的元素数量（当前正在通过你的 $.each() 的元素的数量）

我建议你做一些类似于你的问题的下面的概括示例（概括因为我无法访问您的 dom）。

function showMessage(message){
  $('body').html(message);
}

var itemData = [1,2,3,4];

var i = 0;

function idTimer(list, i) {
  if (!(i >= 0)) {
     i= 0;
  }
  setTimeout((function(msg){
    i++;
    return function(){
      if(i < list.length){
        idTimer(list, i);
      }
      showMessage(msg);
    }
  })(list[i]), 1000);
}

idTimer(itemData);

可以在以下位置找到此代码的现场演示：http://jsbin.com/ifuqo

If you want to avoid a setInterval and just bound the calls to the length of your list, you can create a self-executing function that saves your current index instead of using the one from the closure. The variable from the closure will end up always being the last element in your each loop, since the loop will finish long before the variable in your setTimeout function is read.

You are also calling the clearTimeout function, which doesn't make a whole lot of sense to me in this context.

On top of that, all of your setTimeouts are going to be called nearly at the same time. This would result in all the values flashing on the screen milliseconds apart (or too fast to see in some cases). A loop isn't really appropriate here, because the setTimeout function is asynchronous. A system of callbacks is best for a finite number of runs, and a setInterval system is best for an unknown amount of runs. To me your number of runs should be the number of elements in your jQuery object (the ones that are currently going through your $.each())

I would suggest that you do something like the following generalized example of your question (generalized since I don't have access to your dom).

function showMessage(message){
  $('body').html(message);
}

var itemData = [1,2,3,4];

var i = 0;

function idTimer(list, i) {
  if (!(i >= 0)) {
     i= 0;
  }
  setTimeout((function(msg){
    i++;
    return function(){
      if(i < list.length){
        idTimer(list, i);
      }
      showMessage(msg);
    }
  })(list[i]), 1000);
}

idTimer(itemData);

A live demo of this code can be found at: http://jsbin.com/ifuqo

回复收藏 0 原文

~没有更多了~