2011-10-13 58 views
2

後jQuery的每個功能我有(下圖)的XML文檔:添加延遲一個Ajax調用

<?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的混合功能。

感謝您的幫助,請給我舉例。

+0

夥計們,我可以請有人修改我的代碼,所以這個工作方式我想請。我需要這個儘快,我很欣賞迄今爲止所有的幫助,但它沒有讓我到任何地方。 –

+0

好吧,如果我的回答沒有爲你提供任何建議,爲什麼你不使用自己的櫃檯而不是依靠我。 – dispake

回答

-1

我自己想出來並製作了一個自定義插件來啓動。感謝所有的幫助,但所有給出的答案都是不相關的。科裏你是最接近的標誌,但仍然不完全是我所追求的。乾杯。

+1

如果您要回答自己的問題,那麼發佈您如何解決問題將對您有所幫助。特別是當其他兩位用戶投票提出你的問題時,顯然還有其他人對最終解決方案感興趣(包括我自己)。 – cori

+0

對不起,基本上我不得不做一個會延遲循環響應的插件。我用setInterval方法做了這個。我不需要迭代使用xml節點的索引。沒有發佈代碼,它是這樣的:讓我的XML文件,並返回內容>找到所需的所有屬性,並將它們分配給變量>啓動循環使用自定義jQuery每個延遲功能>在循環結束設置超時循環通過調用每個延遲函數並將其設置爲延遲時間乘以返回xml節點長度的時間來使其不斷運行。 –

0

你的每個函數中的「i」可能指的是一個鍵而不是索引。由於你的對象是一個節點,它可能會把它當作地圖。在這種情況下,你的超時「2000 * i」不會產生一個數值(或0),這就是爲什麼你的最後一個節點總是顯示出來 - 它們都是按順序同時執行的。

見例如:http://jsfiddle.net/nVdhf/2/

和看到VS地圖在其陣列的兩個例子的區別http://api.jquery.com/jQuery.each/

0

你的問題是,你不等待第一超時你移動到前完成下一個。你需要以某種方式在setTimeout方法的回調中移動到下一個。

0

我懷疑發生的事情是這樣的:

  1. 您遍歷XML數據的內容,建立對每個節點的內容字符串。這可能在外面需要幾百毫秒。
  2. 當您的超時執行時,contents被設置爲最後一個節點的值,並且$('#xmlFeed').html只是保持設置爲該值。

沿着http://jsfiddle.net/cori/PrVRc/1/的方向行事是我認爲你想要做的事情的概念證明(只是經過輕微測試)。

+0

對javascript的評論是值得歡迎的,順便說一句,其中大部分可能都不符合最佳實踐。 – cori