Question

I have a page which loops through multiple unique id’s and, using ajax, loads information into divs which correspond to rows in a database table. Because there are quite a few divs that need to be created and each div contains a considerable amount of information, this takes quite a while. What I would like to do is animate/show each div once it has been appended to the dom, allowing the loop to continue appending/showing more divs as they are created.

My code looks something like this:

// loop section unique IDs
$.each(uniqueIDs, function(key, uniqueID)
{

    // call AJAX synchronously
    // append resulting information to page

    // show newly appended div
    $("#" + uniqueID).slideDown();

});

The issue I am having is that the animations are very inconsistent. Sometimes the first div is animated while all subsequent divs are just shown without animation. Sometimes all divs are just shown without animation. I’m sure there has to be a more rigorous way to do this…

EDIT I have been calling ajax synchronously to keep the divs in proper order (otherwise the divs are appended to the dom in the order in which they complete). I’d be happy to find a solution using asynchronous ajax calls which preserve the original order.

Answer 1

Use an array of $.Deffered objects for each asynchronous call, and then pass it to $.when(), whose .done() callback will only fire when all deferred objects are resolved, i.e., when all asynchronous operations are finished:

var uniqueIDs = [1, 2, 3, 4];
var $deferreds = [];            

$.each(uniqueIDs, function (i, elem) {
    $deferreds.push(
      $.ajax({
        // options
      }).done(function (data) {
      })
    );
});

$.when.apply($, $deferreds).done(function () {
   console.log(arguments); // arguments will contain the result of each asynchronous call in order
});

Thus you can use that callback to animate your divs in order.

Here’s a DEMO.