How can I order the results of several asynchronous jQuery queries?

Question

I am extracting information from several web services to display on a web page. I would like to be able to order the results, but keep the dynamic dynamic. However, a way to structure the code means that the elements will be inserted into the DOM in order of completion of the requests, which is not deterministic. How can I guarantee a certain order, but not insert the 'dud' elements if one of the error results produces, but does not return valid information?

// Get my apps from iTunes
var iTunesLinks = ["525393529", "645218452", "737479996"];
var iTunesSquareSize = 128;

$.each(iTunesLinks, function(index, value) {

    var iTunesLink = "https://itunes.apple.com/lookup?id=" + value + "&callback=?";

    $.getJSON(iTunesLink, function(data) {

       var items = [];
       items.push("<section id=\"myApps\"><table>");

       var results = data.results;

       $.each ( results, function( key, val ) {

            var appName = val.trackName;
            var iconURL = val.artworkUrl100;
            var appURL = val.trackViewUrl;
            items.push( "<td align=center width=" + iTunesSquareSize + " style=\"vertical-align:top\">" + divStart + "<a href=" + appURL + " target=_blank><img src=\"" + iconURL + "\" width=" + iTunesSquareSize + " height=" + iTunesSquareSize + "></a></div><a href=" + appURL + " target=_blank>" + appName + "</a></td>" );     
       });

       items.push("</table></section>");

       $( "<td/>", {
         "class": "applist",
         html: items.join( "" )
       }).appendTo( document.getElementById("myApps") );
    });
});

Answer 1

promises , $.when(), , , async ajax :

// Get my apps from iTunes
var iTunesLinks = ["525393529", "645218452", "737479996"];
var iTunesSquareSize = 128;
var promises = [];

$.each(iTunesLinks, function(index, value) {

    var iTunesLink = "https://itunes.apple.com/lookup?id=" + value + "&callback=?";
    promises.push($.getJSON(iTunesLink));

});

$.when.apply($, promises).done(function(/* arg1Array, arg2Array, arg3Array, ... */) {
    // now process all the results in order
    var items, results;
    for (var i = 0; i < arguments.length; i++) {
        // arguments[i] is an array of [data, statusText, jqXHR]
        results = arguments[i][0].results;
        items = [];
        items.push("<section id=\"myApps\"><table>");

        $.each ( results, function( key, val ) {

            var appName = val.trackName;
            var iconURL = val.artworkUrl100;
            var appURL = val.trackViewUrl;
            items.push( "<td align=center width=" + iTunesSquareSize + " style=\"vertical-align:top\">" + divStart + "<a href=" + appURL + " target=_blank><img src=\"" + iconURL + "\" width=" + iTunesSquareSize + " height=" + iTunesSquareSize + "></a></div><a href=" + appURL + " target=_blank>" + appName + "</a></td>" );     
        });

        items.push("</table></section>");

        $( "<td/>", {
         "class": "applist",
         html: items.join( "" )
        }).appendTo( document.getElementById("myApps") );
    }
});