在ajax调用后为jquery每个函数添加延迟答案

【问题标题】：Add a delay to jquery each function after an ajax call在ajax调用后为jquery每个函数添加延迟
【发布时间】：2011-12-06 14:26:35
【问题描述】：

我有一个 XML 文档（如下）：

<?xml version="1.0" encoding="UTF-8"?>
<testimonials>
    <testimonial user="User Name 1" state="1" comment="Comment 1"></testimonial>
    <testimonial user="User Name 2" state="2" comment="Comment 2"></testimonial>
    <testimonial user="User Name 3" state="3" comment="Comment 3"></testimonial>
    <testimonial user="User Name 4" state="4" comment="Comment 4"></testimonial>
    <testimonial user="User Name 5" state="5" comment="Comment 5"></testimonial>
 </testimonials>

我通过一个 jQuery ajax 调用来获取这些数据。现在我想在一个框（#xmlFeed）中显示它并淡入淡出到下一个节点。它应该在移动到下一个节点之前显示几秒钟，再次淡入淡出。

到目前为止，我的代码在下面，但我无法让循环和淡入淡出正常工作。代码如下：

<!doctype html>
<html>
<head>
    <title></title>


</head>
<body>
    <div id="container">
        <div id="xmlFeed"></div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function(){

            //Initial load
            getXML();

        });

        getXML = function(){
            $.ajax({
                type: "GET",
                url: "xml/xmlFeed.xml",
                dataType: "xml",
                success: function(xml){

                    var data = $( xml );
                    var findTestis = data.find("testimonial");

                    findTestis.each(function(i){

                        name = this.getAttribute("user");
                        state = this.getAttribute("state");
                        comment = this.getAttribute("comment");

                        contents = "    <div id='listing" + i + "'>"
                                        + "<p><strong>" + comment + "</strong></p>"
                                        + "<p>" + name + ", " + state + "</p>"
                                        + "</div>";

                        setTimeout(function(){
                            $("#xmlFeed").html(contents);
                        }, 2000 * i );

                    });

                }
            });
        }
    </script>
</body>

目前它正在工作并进行显示，但它只是一遍又一遍地显示最后一个节点的内容。我猜我需要更新增量或类似的东西。将此视为 RSS 样式功能。

感谢您的帮助，请举例说明。

【问题讨论】：

伙计们，我可以请人修改我的代码，以便按照我想要的方式工作。我需要这个尽快，我感谢迄今为止的所有帮助，但它没有让我到任何地方。
好吧，如果我的回答对您没有任何建议，您为什么不使用自己的计数器而不是依赖 i。

标签： javascript jquery html xml ajax

【解决方案1】：

每个函数中的“i”可能指的是键而不是索引。由于您的对象是一个节点，它可能会将其视为地图。在这种情况下，您的超时“2000 * i”不会产生数值（或 0），这就是为什么您的最后一个节点将始终显示 - 它们都同时执行但按顺序执行。

参见示例：http://jsfiddle.net/nVdhf/2/

看看他们的两个数组与映射示例的区别http://api.jquery.com/jQuery.each/

【讨论】：

【解决方案2】：

您的问题是您没有等待第一个超时完成，然后再继续下一个超时。您需要在 setTimeout 方法的回调中以某种方式继续进行下一个。

【讨论】：

【解决方案3】：

我怀疑发生了什么：

您遍历 xml 数据的内容，为每个节点构建内容字符串。这在外面可能需要几百毫秒。
到您的超时执行时，contents 设置为最后一个节点的值，$('#xmlFeed').html 一直设置为该值。

类似于http://jsfiddle.net/cori/PrVRc/1/ 的东西是我认为您正在尝试做的事情的概念证明（仅经过轻微测试）。

【讨论】：

欢迎使用 javascript 上的 cmets，顺便说一句，其中大部分可能不符合最佳实践。

【解决方案4】：

我自己想出来并制作了一个自定义插件来启动。感谢所有的帮助，但给出的所有答案都是无关紧要的。科里你最接近标记，但仍然不是我所追求的。干杯。

【讨论】：

如果您要回答自己的问题，发布您解决问题的方法会有所帮助。尤其是由于另外两个用户对您的问题投了赞成票，显然还有其他人对最终解决方案感兴趣（包括我自己）。
对不起，基本上我必须制作一个插件来延迟循环响应。我使用 setInterval 方法做到了这一点。我不需要使用 xml 节点的索引进行迭代。没有发布代码，它是这样的：给我 xml 文件并返回内容 > 找到所有需要的属性并将它们分配给变量 > 使用自定义 jQuery 每个延迟函数开始循环 > 在循环结束时设置一个超时循环通过调用每个延迟函数返回以使其不断运行，并将其时间设置为延迟乘以返回 xml 节点长度的时间。