在ajax调用之后添加延迟到jquery的每个函数。

I have an XML document (below):

我有一个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>

I am fetching this data via an jQuery ajax call. Now I would like to display this in a box ( #xmlFeed ) and fade in and out to the next node. It should display for let's say a couple of seconds before it moves onto the next node, again fading in and out.

我正在通过jQuery ajax调用获取数据。现在我想把它显示在一个框(#xmlFeed)中，然后淡出到下一个节点。它应该显示几秒钟，然后移动到下一个节点，再次淡入和淡出。

My code so far is below which is working but I just can't get the looping and fading in and out to work correctly. Code below:

到目前为止，我的代码在下面运行，但是我不能让循环和淡入正常工作。下面的代码:

<!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>

Currently it's working and doing the displays but it's only showing the contents of the last node over and over. I'm guessing I need to update the increment or something along those lines. Think of this as an RSS sytle feature.

目前它正在工作并执行显示，但它只是反复显示最后一个节点的内容。我猜我需要更新增量或者类似的东西。可以将其视为RSS sytle特性。

Thanks for any help, please give me examples.

谢谢你的帮助，请给我举个例子。

4 个解决方案

#1

The "i" in your each function is probably referring to a key rather than an index. Since your object is an node, it will likely treat it as a map. Which in that case, your timeout "2000 * i" won't result in a numeric value (or 0), which is why your last node will always show up - they're all executed at the same time but in sequential order.

每个函数中的“i”可能指的是一个键而不是索引。由于您的对象是一个节点，它很可能将其视为一个映射。在这种情况下，超时“2000 * i”不会导致一个数值(或0)，这就是为什么最后一个节点总是出现的原因——它们都是同时执行的，但是是按顺序执行的。

see example: http://jsfiddle.net/nVdhf/2/

看到示例:http://jsfiddle.net/nVdhf/2/

and the see the difference in their two examples of array vs map http://api.jquery.com/jQuery.each/

在数组vs映射http://api.jquery.com/jQuery.each/的两个示例中，可以看到它们的区别

#2

Your problem is that you're not waiting for the first timeout to complete before you move on to the next one. You need to somehow move on to the next one within the callback of the setTimeout method.

你的问题是，你没有等到第一次超时后再继续下一个超时。您需要以某种方式转移到setTimeout方法回调中的下一个。

#3

I suspect what's happening is this:

我怀疑发生的是:

you iterate over the contents of the xml data, building up the contents string for each node. This probably take a couple of hundred milliseconds at the outside.
遍历xml数据的内容，为每个节点构建内容字符串。这可能需要几百毫秒。
By the time your timeout executes, contents is set to the value of the last node, and $('#xmlFeed').html just keeps getting set to that value.
当超时执行时，内容被设置为最后一个节点的值，以及$('#xmlFeed')。html就一直被设置成这个值。

Something along the lines of http://jsfiddle.net/cori/PrVRc/1/ is a proof of concept of what I think you're trying to do (only lightly tested).

类似于http://jsfiddle.net/cori/PrVRc/1/的内容可以证明我认为您正在尝试做的事情(只是经过了简单的测试)。

#4

-1

Figured it out by myself and made a custom plugin to boot. Thanks for all the help but all answers given were irrelevant. Cori you were closest to the mark but still not quite what I was after. Cheers.

我自己算出来了，做了一个自定义插件来引导。谢谢你的帮助，但所有的答案都无关紧要。Cori，你离目标很近，但仍然不是我想要的。欢呼。

#1