【问题标题】:show data with delay from jquery each loop显示来自jquery每个循环的延迟数据
【发布时间】:2010-12-20 01:03:19
【问题描述】:

我的问题如下:

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

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

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


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

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

谢谢,理查德

【问题讨论】:

    标签: jquery loops delay each settimeout


    【解决方案1】:

    改用 setInterval:

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

    【讨论】:

    • 谢谢,是否需要使用 window 或者它也可以是一个变量或什么都没有?我实际上更喜欢这个,因为我可以理解语法。但是来自@Alex 的那个可能有更多的优势?
    • 视情况而定。 setInterval 可能更适合这项任务,但这也是一个偏好问题。您还可以将间隔存储在变量中,然后在需要停止间隔时将其清除。标准是使用 window.setInterval() 但您可以省略窗口部分(不推荐)。见:developer.mozilla.org/en/DOM/window.setInterval
    【解决方案2】:

    如果您想避免 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

    【讨论】:

    • 谢谢,我自己也想出了这个。虽然没有回调,但看起来很有趣。我已经设置了一个全局计数器和一个数组。在 ajax 函数中,我将数据推送到数组并设置 setinterval() 如果它收到任何数据。
    • 这种语法很难理解,但我会看看那个链接。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-19
    • 1970-01-01
    • 2020-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多