jquery的Deferred 对象初体验

浏览数：41 / 时间：2015年06月09日

　　之前阅读了阮一峰老师的jQuery的deferred对象详解一文，结合jquery手册，算是对Deferred对象有了初步的认知。今天便来分享一下我自己的一些体会。

　　一、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函数内部进行修改，这大大增加了程序的耦合性与维护成本。

　　　　二、deferred可以为多个操作指定回调函数

　　　　有时候我们需要在程序中同时调用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         })