之前阅读了阮一峰老师的jQuery的deferred对象详解一文，结合jquery手册，算是对Deferred对象有了初步的认知。今天便来分享一下我自己的一些体会。
先来看下面的例子
1 var test = function(callback) { 2 setTimeout(function() { 3 console.log(‘我完成了‘); 4 callback(‘我是回调‘) 5 }, 1000) 6 }; 7 test(function(text) { 8 console.log(text) 9 });
上面的函数test在调用时我们传入了一个回调，在test被调用1秒后回调执行。这段代码现阶段运行的很好，下面我们来用deferred对象来改写一下。
1 var test = function(dfd) { 2 setTimeout(function() { 3 console.log(‘我完成了‘); 4 dfd.resolve(‘我是回调‘); 5 }, 1000) 6 } 7 8 $.Deferred(test).done(function(text) { 9 console.log(text) 10 })
上面的代码运行的也很好。
接下来如果我们希望为test函数再添加一个回调函数，那上面的2段代码需要怎么修改呢？
第一段可以改为：（方式很多，但都需要进入test函数内进行修改）
1 var test = function (callback, callback2) { 2 setTimeout(function () { 3 console.log(‘我完成了‘); 4 callback(‘我是回调‘); 5 callback2(); 6 }, 1000) 7 } 8 test(function (a) { 9 console.log(a); 10 }, function () { 11 console.log(‘我是回调2‘); 12 });
第二段改为：（只需再次调用done方法）
1 var test = function (dfd) { 2 setTimeout(function () { 3 console.log(‘我完成了‘); 4 dfd.resolve(‘我是回调‘); 5 }, 1000) 6 } 7 8 $.Deferred(test).done(function (a) { 9 console.log(a) 10 }).done(function () { 11 console.log(‘我是回调2‘) 12 })
其中，我们为第一段代码中的test函数新增了一个参数，并在调用时传入第二个回调函数。第二段代码只需要再使用延迟对象的done方法即可。比较这两种方式，可以明显的发现使用deferred对象可以更加方便的管理添加回调函数。而第一段代码虽然有很多种方式来实现添加回调，但无论如何都需要进入到test函数内部进行修改，这大大增加了程序的耦合性与维护成本。
有时候我们需要在程序中同时调用2个耗时不同的函数，这时候如果我们希望在这两个函数都执行完后再执行回调函数，应该怎么做呢？
传统的方式实现起来就显得不够优雅了，而使用deferred对象与$.when方法可以轻松的实现。
1 var test1 = function (dfd) { 2 setTimeout(function () { 3 console.log(‘test1‘); 4 dfd.resolve(‘test1执行完毕‘); 5 }, 1000) 6 } 7 var test2 = function (dfd) { 8 setTimeout(function () { 9 console.log(‘test2‘); 10 dfd.resolve(‘test2执行完毕‘); 11 }, 2000) 12 } 13 $.when($.Deferred(test1), $.Deferred(test2)).done(function (a, b) { 14 console.log(a); 15 console.log(b); 16 console.log(‘2个函数都执行完毕‘); 17 })
可以看出用deferred实现起来既方便又优雅。
以上是我对deferred对象的一些初步认知，水平有限，欢迎大家指正。
原文：http://www.cnblogs.com/qinhaojie/p/4106654.html