如何在循環中使用AJAX

我想用我從第一次AJAX調用中獲得的新URL調用另一個AJAX函數。但如果我嘗試像這樣循環，它會失敗。我認爲for循環不會等到AJAX完成它的工作，但我不知道如何去對抗它。有什麼建議麼？如何在循環中使用AJAX

<!DOCTYPE html> 
      <html> 
     <head> 
      <title>Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
      <link rel="stylesheet" href="bootstrap.min.css"> 
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
      <style> 
     body{ 
      background-color: #D4DAD8; 

     } 
     #content { 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 10px; 
     } 
     #kastid{ 
     background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%); 
     background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%); 
     background-image: -o-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%); 
     background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #EDEDED)); 
     background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%); 
     background-image: linear-gradient(to bottom right, #FFFFFF 0%, #EDEDED 100%); 
     padding: 3px 3px; 
     height: 400px; 
     } 
      </style> 
     </head> 
     <body> 

      <div id="content"></div> 

     <script type="text/javascript"> 
     var url1 = "https://www.readability.com/api/content/v1/parser?url="; 
     var urltoken = "&token=18ba7d424a0d65facdaea8defa356bc3e430f8ce"; 
     var i = 0; 
     var link = []; 
     var finalurl = []; 
     var pubDate = []; 
     $.ajax({ 
      url:'https://www.readability.com/rseero/latest/feed', 
      dataType:'xml', 
      type:'GET', 
      success:function(xml) { 
       $(xml).find('item').each(function() { 
        pubDate[i] = $(this).find("pubDate").text();     
        link[i] = $(this).find("link").text();   
        finalurl[i] = url1 + link[i] + urltoken; 
        console.log(i); 
        console.log(finalurl[i]); 
        console.log(link[i]); 
        i++; 
       }); 
      }, 
      error:function() { 
       alert("Feed error.1.!"); 
      } 
     }).done(function() { 
      for(i = 0; i < finalurl.length; i++) { 
      getInfo(i); 
     } 
     }); 
     function getInfo(i) { 
     $.ajax({ 
      url:finalurl[i], 
      dataType:'xml', 
      type:'GET', 
      success:function(xml) { 
       console.log(finalurl[i]); 
       var title = $(this).find("title").text(); 
       var content = $(this).find("content").text(); 
       $("#content").append('<div class="col-md-4 col-xs-12" id="kastid"><a href="'+link[i]+'">'+title+'</a><p><p>'+pubDate[i]+'<p><p>'+description); 
      }, 
      error:function() { 
       console.log(finalurl[i]); 
       alert("Feed error..!"); 
      } 
     }); 
     } 
     </script> 
     </body> 
     </html>

來源

2014-11-03 mrtn

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – epascarello 2014-11-03 18:10:53

使用Promise功能。這允許您在異步代碼完成運行後運行一段代碼。這意味着使用promise，在第一個ajax完成之後，第二個可以被執行並且可以訪問來自第一個ajax的數據。

見http://api.jquery.com/promise/

作爲一個說明，從$.ajax()返回的對象實現了Promise接口，可直接用作一個承諾。

來源

2014-11-03 18:10:10 AlexL

我不明白這一點。你能告訴我如何將這個承諾落實到我的代碼中嗎？我用它來處理異步：錯誤的事情。 – mrtn 2014-11-03 18:28:56

使用async有什麼問題：false？ – Larry 2014-11-03 18:29:58

異步：false將停止每個JavaScript代碼執行，直到您的ajax響應。這會使一切崩潰。哈哈 – 2014-11-03 18:33:49

如何在循環中使用AJAX

回答

相關問題