追加訂單 - jQuery

Question

我想通過它如何顯示（紅色，藍色，橙色，黑色）來訂購字符串。出於某種原因，它會隨機追加訂單。例如：它會輸出（藍色，橙色，紅色，黑色）。任何幫助都會很棒。謝謝。

var tCookie = "red,blue,orange,black"; 
var Cookies = tCookie.split(','); 

if (Cookies) { 
    for (var i = 1; i <= Cookies.length; i++) { 

     var dataString = "TabId="+Cookies[i]+""; 

     $.ajax({ 
      type: "POST", 
      url: "includes/tab.php", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       $("#Dynamic_Tab").append(html).children(':last').hide().fadeIn("fast"); 
      } 
     }); 
    } 
} 

Answer 1

您有一個請求和響應的清單，並開始追加當所有的完成，使順序總是正確的：

var deferreds = [], 
    results = []; 

for (var i = 1; i <= Cookies.length; i++) { 
    (function(i) { // to freeze i 

     var dataString = "TabId="+Cookies[i]+""; 

     deferreds.push($.ajax({ 
      type: "POST", 
      url: "includes/tab.php", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       results[i] = html; // insert at the synchronous position 
      } 
     })); 

    })(i); 
} 

$.when.apply($, deferreds).then(function() { 
    $.each(results, function(i, html) { 
     $("#Dynamic_Tab").append(html).children(':last').hide().fadeIn("fast"); 
    }); 
}); 

Answer 2

你可以在這裏使用延遲對象只追加畢竟Ajax請求的HTML回來：

//create array to store XHR objects that will resolve when the AJAX requests return 
//also create an object to store the AJAX responses 
var jqXHRs = [], 
    responses = {}; 

//iterate through each of the cookie indexes 
$.each(cookies, function (index, value) { 

    //create the dataString and cache the value of this index so it can be used in the success callback for the AJAX request associated with this index 
    var dataString = "TabId=" + value, 
     thisValue = value; 

    //store an empty string in the output variable for the current index, this keeps it's place in-line 
    responses[thisValue] = ''; 

    //do the AJAX request and store it's XHR object in the array with the rest 
    jqXHRs[jqXHRs.length] = $.ajax({ 
     type : "POST", 
     url  : "includes/tab.php", 
     data : dataString, 
     cache : false, 
     success : function (html) { 

      //now that the AJAX request has returned successfully, add the returned HTML to the output variable for this index 
      responses[thisValue] = html; 
     } 
    }); 
}); 

//wait for all of the XHR objects to resolve then add all the HTML to the DOM 
$.when(jqXHRs).then(function() { 

    //all of the AJAX requests have come back and you can now add stuff to the DOM 
    var $element = $("#Dynamic_Tab"); 
    $.each(responses, function (index, value) { 
     $element.append(value).children(':last').hide().delay(index * 250).fadeIn(250); 
    } 
}); 

的.delay()是使每一個新的行會褪色的，爲了。