javascript - 在将不同的 ajax 调用写入页面之前对它们进行排序

Question

我正在循环遍历一个数组并在屏幕上显示数据。这部分工作完美。

现在我想对“Startdate”上的元素进行排序。

    for (var i = 0; i < schedule_id.length; i++) {

    //Ajax call maken
    $.ajax({
        url: "http://api.viewer.zmags.com/schedules/" + schedule_id[i] + "?key=" + api_key
    })
    //WdInit after 10 calls
    .done(function(data){

        //Check publicatieID is not null
        if (undefined === data.scheduleEntries[default_pub]|| null === data.scheduleEntries[default_pub]) {
        }
        else
        {       
        //loopen doorheen resultaat call
        $.each(data.scheduleEntries, function(index, entry){

            //Datums
            var sdate = moment(entry.startDate).format('DD/MM');
            var edate = moment(entry.endDate).format('DD/MM');
            var sdatecheckformat = moment(entry.startDate).format('YYYY/MM/DD');    
            var edatecheckformat = moment(entry.endDate).format('YYYY/MM/DD');  
            var sdatecheck = new Date(sdatecheckformat);
            var edatecheck = new Date(edatecheckformat);
            var today = new Date();
            var timeDiff = Math.abs(sdatecheck.getTime() - today.getTime());
            var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

            //Check geldig
            if(today<=edatecheck && diffDays<=14){


            // Decide list order, load the thumbnail for each publication.
            var place = "first";

            $('#archive').prepend('<div class="container" id="'+entry.publicationID+'"></div>');
            $('.container:' + place).append('<div class="thumb"></div>');

            $('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
            $('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');
            $('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');

            // Load the publication title below each thumbnail.
            $('.thumb:' + place).after('<div class="title"></div>');
            $('.title:' + place).append(entry.publicationName);

            // Load the publication startsdate & enddate.
            $('.title:' + place).after('<div class="date"></div>');
            $('.date:' + place).append(sdate + " tot " + edate);

            // Set up publication links.
            $('.container:' + place).click(function(){
                loadPub(entry.publicationID, entry.publicationName);
                setActive(entry.publicationID);
                //Change css of current element         
            });     
            }   

                            //Eerste element tonen 
            if(0===first_element){
                first_element++;
                loadPub(entry.publicationID, entry.publicationName);
                initFirst(entry.publicationID);
            }

        });
        }
    });
    //Einde loop
    }

在此循环中无法进行排序，因为我们正在立即写入元素。您能帮我一种对数据进行排序的方法吗？也许首先获取所有数据，然后通过创建具有相同计划 ID 但以正确排序方式的数组来对它们进行排序。

到目前为止我的代码:

    //Sortering
    var arr = [];
    var arr1 = [];
    //Loopen 10 keer
    for (var i = 0; i < schedule_id.length; i++) {
    arr1.push("test");
    //Ajax call maken
    $.ajax({
        url: "http://api.viewer.zmags.com/schedules/" + schedule_id[i] + "?key=" + api_key,
        success: function(data) {
            arr.push(data);
        }
    })
    }

    //Know looping throught array or something and sorting 

Answer 1

您可以使用$.when()来等待多个延迟解析。

例如:

var arrayOfAjaxPromises = [$.ajax("/page1"), $.ajax("/page2"), $.ajax("/page3")];

$.when.apply($, arrayOfAjaxPromises).done(function() {
    // this callback gets called when all the promises are resolved
    // responses are passed in the array-like arguments object, so they can be read sequentially
    //   or you can sort or process the way you want
    var i;
    for (i = 0; i < arguments.length; i+= 1) {
        alert(arguments[i]);
    }
});