jQuery deferreds and promises - .then() vs .done() - Stack Overflow
to customize your list.
Announcing Stack Overflow Documentation
We started with Q&A. Technical documentation is next, and we need your help.
Whether you're a beginner or an experienced developer, you can contribute.
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
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?
Many thanks
213k19220363
5,500113760
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
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().
10.3k94791
8,25611827
There is also difference in way that return results are processed (its called chaining, done doesn't chain while then produces call chains)
promise.then(function (x) { // Suppose promise returns "abc"
console.log(x);
return 123;
}).then(function (x){
console.log(x);
}).then(function (x){
console.log(x)
The following results will get logged:
promise.done(function (x) { // Suppose promise returns "abc"
console.log(x);
return 123;
}).done(function (x){
console.log(x);
}).done(function (x){
console.log(x)
will get the following:
6,40352546
6,11244282
.done() has only one callback and it is the success callback
.then() has both success and fail callbacks
.fail() has only one fail callback
so it is up to you what you must do... do you care if it succeeds or if it fails?
4,56541337
5,68111550
deferred.done()
adds handlers to be called only when Deferred is resolved. You can add multiple callbacks to be called.
var url = '/posts/1';
$.ajax(url).done(doneCallback);
function doneCallback(result) {
console.log('Result 1 ' + result);
You can also write above like this,
function ajaxCall() {
var url = '/posts/1';
return $.ajax(url);
$.when(ajaxCall()).then(doneCallback, failCallback);
deferred.then()
adds handlers to be called when Deferred is resolved, rejected or still in progress.
var url = '/posts/1';
$.ajax(url).then(doneCallback, failCallback);
function doneCallback(result) {
console.log('Result ' + result);
function failCallback(result) {
console.log('Result ' + result);
1,65662863
then() always means it will be called in whatever case. But the parameters passing are different in different jQuery versions.
Prior to jQuery 1.8, then() equals done().fail(). And all of the callback functions share same parameters.
But as of jQuery 1.8, then() returns a new promise, and if it has return a value, it will be passed into the next callback function.
Let's see the following example:
var defer = jQuery.Deferred();
defer.done(function(a, b){
return a +
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a +
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a +
}).done(function( result ) {
console.log("result = " + result);
defer.resolve( 3, 4 );
Prior to jQuery 1.8, the answer should be
result = 3
result = 3
result = 3
All result takes 3. And then() function always passes the same deferred object to the next function.
But as of jQuery 1.8, the result should be:
result = 3
result = 7
result = NaN
Because the first then() function returns a new promise, and the value 7 (and this is the only parameter that will passed on)is passed to the next done(), so the second done() write result = 7. The second then() takes 7 as the value of a and takes undefined as the value of b, so the second then() returns a new promise with the parameter NaN, and the last done() prints NaN as its result.
There is actually a pretty critical difference, insofar as jQuery's Deferreds are meant to be an implementations of Promises (and jQuery3.0 actually tries to bring them into spec).
The key difference between done/then is that
.done() ALWAYS returns the same Promise/wrapped values it started with, regardless of what you do or what you return.
.then() always returns a NEW Promise, and you are in charge of controlling what that Promise is based on what the function you passed it returned.
Translated from jQuery into native ES2015 Promises, .done() is sort of like implementing a "tap" structure around a function in a Promise chain, in that it will, if the chain is in the "resolve" state, pass a value to a function... but the result of that function will NOT affect the chain itself.
const doneWrap = fn =& x =& { fn(x); return x };
Promise.resolve(5)
.then(doneWrap( x =& x + 1))
.then(doneWrap(console.log.bind(console)));
$.Deferred().resolve(5)
.done(x =& x + 1)
.done(console.log.bind(console));
Those will both log 5, not 6.
Note that I used done and doneWrap to do logging, not .then. That's because console.log functions don't actually return anything.
And what happens if you pass .then a function that doesn't return anything?
Promise.resolve(5)
.then(doneWrap( x =& x + 1))
.then(console.log.bind(console))
.then(console.log.bind(console));
That will log:
What happened?
When I used .then and passed it a function that didn't return anything, it's implicit result was "undefined"... which of course returned a Promise[undefined] to the next then method, which logged undefined.
So the original value we started with was basically lost.
.then() is, at heart, a form of function composition: the result of each step is used as the argument for the function in the next step.
That's why .done is best thought of as a "tap"-> it's not actually part of the composition, just something that sneaks a look at the value at a certain step and runs a function at that value, but doesn't actually alter the composition in any way.
This is a pretty fundamental difference, and there's a probably a good reason why native Promises don't have a .done method implemented themselves.
We don't eve have to get into why there's no .fail method, because that's even more complicated (namely, .fail/.catch are NOT mirrors of .done/.then -> functions in .catch that return bare values do not "stay" rejected like those passed to .then, they resolve!)
3,90222241
that is my answer.
var deff = $.Deferred();
deff.then(function(){
alert('ok');
var deff = $.Deferred();
setTimeout(function(){
deff.resolve()
}).then(function () {
alert('ok2')
deff.resolve()
This is then unique function. it can prevent Callback hell。
.done() terminates the promise chain, making sure nothing else can attach further steps. This means that the jQuery promise implementation can throw any unhandled exception, since no one can possible handle it using .fail().
In practical terms, if you do not plan to attach more steps to a promise, you should use .done(). For more details see
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled的海词问答和网友补充：
相关词典网站：it is not i want to do that i have done about you的中文意思
三人行ゝ供
我曾经对你做的那些事 并不是出于我的本意字面翻译是 我对你做过的事 不是我想要对你做的事
为您推荐：
其他类似问题
扫描下载二维码君，已阅读到文档的结尾了呢~~
广告剩余8秒
文档加载中
introduction to microcontrollers
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
introduction to microcontrollers
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口