追加订单 - 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()是使每一个新的行会褪色的，为了。