Question

When I do this:

$.ajax({
    url: purl,
    dataType: 'json',
    success: function(data){
        alert(data.length);
    }
});

I get an alert with the length count.

but when I do this…

$.ajax({
    url: purl,
    dataType: 'json',
    success: function(data){
        items = data.length;
    }
});

alert(items);

Setting length to global varialbe, it doesn’t want to play nice. Thoughts?

Answer 1

The AJAX portion doesn’t happen instantaneously; the alert takes place before the AJAX callback has time to set the new value for items.

As of jQuery 1.5, $.ajax returns an object that implements the Promises interface. As such, you can call the .done method anytime you need to be sure that the promise has resolved prior to executing your code:

​var promise = $.ajax({/*...*/});

promise.done(function(data){
    // Only works if the promise is resolved
});

As an example, suppose we created a deferred object directly:

var promise = $.Deferred();

We then told it not to resolve until after five seconds:

setTimeout(function(){ 
    promise.resolve("Foo");
}, 5000);

But then we bound a handler to respond to clicks on the document object:

$(document).on("click", function () {
    promise.done(function(data){
        alert("Data is " + data);
    });
});

Note that we are putting our alert within an anonymous function, and passing it to promise.done to be executed only after the promise has been resolved.

This builds up a queue until that promise is resolved. If I click four times in those first five seconds, nothing will happen, but as soon as that promise resolves I will see four alert boxes appear, one after another.

Now that the promise is resolved, any further clicks (after the 5 second wait) will result in immediate action.

Demo: http://jsfiddle.net/w7swE/1/