jQuery deferreds and promises - .then() vs .done()

jquery promise jquery-deferred
screenm0nkey picture screenm0nkey · Mar 25, 2011 · Viewed 277.1k times · Source

I've been reading about jQuery deferreds and promises and I can't see the difference between using .then() & .done() for successful callbacks. I know Eric Hynds mentions that .done() and .success() map to the same functionality but I'm guessing so does .then() as all the callbacks are all invoked on a completion of a successful operation.

Can anyone please enlighten me to the correct usage?

Answer

Julian Aubourg picture Julian Aubourg · Mar 25, 2011

The callbacks attached to done() will be fired when the deferred is resolved. The callbacks attached to fail() will be fired when the deferred is rejected.

Prior to jQuery 1.8, then() was just syntactic sugar:

promise.then( doneCallback, failCallback )
// was equivalent to
promise.done( doneCallback ).fail( failCallback )

As of 1.8, then() is an alias for pipe() and returns a new promise, see here for more information on pipe().

success() and error() are only available on the jqXHR object returned by a call to ajax(). They are simple aliases for done() and fail() respectively:

jqXHR.done === jqXHR.success
jqXHR.fail === jqXHR.error

Also, done() is not limited to a single callback and will filter out non-functions (though there is a bug with strings in version 1.8 that should be fixed in 1.8.1):

// this will add fn1 to 7 to the deferred's internal callback list
// (true, 56 and "omg" will be ignored)
promise.done( fn1, fn2, true, [ fn3, [ fn4, 56, fn5 ], "omg", fn6 ], fn7 );

Same goes for fail().

Related questions

Deferred versus promise

What is the difference between Deferred and Promise other than the jQuery versions? What should I use for my need? I only want to call the fooExecute(). I only need the fooStart() and fooEnd() to toggle the html div status …

Read More
How to fetch value from Promise object after promise has been resolved

Please note This is a contrived example. function longFunc(){ var deferred = $.Deferred(); setTimeout(function(){ console.log("long func completed"); deferred.resolve("hello"); }, 3000); return deferred.promise(); } function shortAfterLongFunc(x){ console.log('short func completed with value: ' + x); return { a: x }; } …

Read More
jQuery promise with getJSON and callback

I have an ajax call with a callback. I want to call another method JUST after the callback has ended..I used the promise API from jQuery but as you can see below the second method is called before the …

Read More