Add a delay to jquery each function after an ajax call
I have an XML document (below):
<?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.
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.
Thanks for any help, please give me examples.
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.
see example: http://jsfiddle.net/nVdhf/2/
and the see the difference in their two examples of array vs map http://api.jquery.com/jQuery.each/
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.
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.
- By the time your timeout executes,
contentsis set to the value of the last node, and$('#xmlFeed').htmljust keeps getting set to that value.
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).
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.
加载中,请稍侯......
精彩评论