주문 추가 - 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()입니다.