Deferred with jQuery - when() with getJSON() callbacks

Question

I'm trying to understand when function and deferred objects in jQuery.

$.when($.getJSON('/echo/json', function () {
    console.log('sucess');
}, function () {
    console.log('error');
})).then(console.log('get JSON ready!'));

This example returns:

get JSON ready!
sucess

...but I want to achieve that success callback fires first:

sucess
get JSON ready!

How can I do that?

http://jsfiddle.net/lukaszr/rBFmL/

Answer 1

You forgot the function wrapper - your code calls console.log immediately instead of passing a callback function:

.then(console.log('get JSON ready!'));

Should be:

.then(function() {
    console.log('get JSON ready!');
});

Fiddle

Answer 2

Try using .done(...) instead of .then(...). There are examples right in the jQuery documentation.

http://api.jquery.com/jQuery.when/