取決於內循環與阿賈克斯請求

Question

嗨即時通訊使用jquery在一些循環中建立一個html表運行幾個ajax請求。

我該如何讓它們按特定順序運行？

我tryed $。當，然後但對我來說，只有使用似乎異步工作：假的，

我有兩個主要功能

1）建立一個循環內Ajax請求的URL

for (var i = 0; i < split.length; i++) { 
    zeile = split[i]; 

    request = $.ajax({ 
     url: "url.php?q=" + zeile, 

，然後繪製基本表

success: function(data) { 
      $.each(data.data, function(key, val) { 
       p = p + "<td>...</td>"  
       p = p + "<td>...</td>"     
       p = p + "</tr>"; 
       $("#htmlergebnis").append(p);  

畢竟不同的熱曲EST完成，完整的表格繪製我想運行第二個功能，它現在添加來自另一個數據源的表格單元格。爲此它使用了值超出每個現有行（第一循環繪製）作爲搜索值的另一請求

$(".ergebniszeile").each(function(key) { 
    ... 

    var str = "url2.php?q=" + zeile; 
     $.ajax({ 
      url: "" + str, 
      type: 'GET', 
      dataType: 'JSON', 
      success: function(data) { 
       $("#"+rowid+"").children(".value2").append(data.value2); 

我還測試.ajaxComplete和.ajaxStop，但他們似乎與任何Ajax請求不工作循環內的一組特定的請求。

我認爲問題是建立ajax網址的循環。它不是依賴於對方的ajax請求，而是在內部循環與ajax請求。

結果看+相應請求將在此建爲了

<tr><th>loop 1</th><th>loop 1</th><th>loop 1</th><th>loop 2</th><th>loop 2</th><tr> 
<tr><td>request 1</td><td>request 1</td><td>request 1</td><td>request 4</td><td>request 4</td></tr> 
<tr><td>request 1</td><td>request 1</td><td>request 1</td><td>request 5</td><td>request 5</td></tr> 
<tr><td>request 1</td><td>request 1</td><td>request 1</td><td>request 6</td><td>request 6</td></tr> 
<tr><td>request 2</td><td>request 2</td><td>request 2</td><td>request 7</td><td>request 7</td></tr> 
<tr><td>request 2</td><td>request 2</td><td>request 2</td><td>request 8</td><td>request 8</td></tr> 
<tr><td>request 3</td><td>request 3</td><td>request 3</td><td>request 9</td><td>request 9</td></tr> 
<tr><td>request 3</td><td>request 3</td><td>request 3</td><td>request 10</td><td>request 10</td></tr> 

Answer 1

我不會專注於發出請求同步（特定的順序），這隻會減慢你的速度-unless返回數據真的非常大 - 有並行請求是很好的。

我會做的是分離提取數據（請求） - 這可以完全異步完成 - 和表的實際渲染。

因此，您可以舉例說，只需啓動第一個請求來填充表的主要位，然後在準備好時啓動其他請求。在這些調用的成功之後，只需將結果存儲在一個數組中（與請求的鍵一起），並且當所有請求都完成後，按順序遍歷存儲的結果（因爲請求的鍵也被存儲）和然後生成表格。

順便說一句，而不是連接字符串

  p = p + "<td>...</td>"  
      p = p + "<td>...</td>"     
      p = p + "</tr>"; 

使用數組+加盟：

  var sb = []; 
      sb.push("<td>...</td>"); 
      sb.push("<td>...</td>"); 
      sb.push("</tr>"); 

      p += sb.join('');