jQuery中的$.Deferred、$.when异步操作

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

前言

　　网页中常常会出现一些耗时比较长的操作，如ajax请求服务器数据，这些操作都不能立即得到结果。如果我们需要在这些操作执行完后来进行另外的操作，我们就需要将这些操作放在回调函数中，$.Deferred就是jQuery用来处理回调操作的。jQuery中的$.Deferred对$.Callbacks很有依赖，看看$.Callbacks执行回调。

1     var callbacks = $.Callbacks();
2     setTimeout(function(){
3         console.log(1); // 1
4         callbacks.fire(); // 2 add中的方法也会执行(同步的写法，异步执行)
5     }, 1000);
6     callbacks.add(function(){
7         console.log(2);
8     });

　　$.Deferred来实现上面的操作

1     var deferred = $.Deferred();
2     setTimeout(function(){
3         console.log(1); // 1
4         deferred.resolve();// 2
5     }, 1000);
6     deferred.done(function(){
7         console.log(2);
8     });

$.Deferred的三队抽象

1、resolve-》done-》$.Callbacks(‘once memory‘)-》成功-》只触发一次

2、reject-》fail-》$.Callbacks(‘once memory‘)-》失败-》只触发一次

3、notify-》progress-》$.Callbacks(‘memory‘)-》通知-》不断触发直到resolve或reject

 1     var deferred = $.Deferred();
 2     setTimeout(function(){
 3         //deferred.resolve(); // success
 4         deferred.reject(); // error
 5         //deferred.notify(); // progressing
 6     }, 1000);
 7     deferred.done(function(){
 8         console.log(‘success‘);
 9     }).fail(function(){
10         console.log(‘error‘);
11     }).progress(function(){
12         console.log(‘progressing‘);
13     });

下面是一个比较有意思的用法：memory的记忆功能。

 1     var deferred = $.Deferred();
 2     setTimeout(function(){
 3         deferred.resolve();// 1
 4     }, 100);
 5     deferred.done(function(){
 6        console.log(1);
 7     });
 8     $(‘#btn‘).on(‘click‘, function () {
 9         deferred.done(function(){
10             console.log(2); // 2...只要单击一次按钮就会触发一次
11         });
12     });

deferred和promise

　　$.Deferred会有两个延迟对象，分别是deferred和promise。deferred包含有所有的方法，而promise不包含改变延迟对象状态的三个方法resolve、reject、notify。这样做的好处就是在某些时候对外不提供改变对象状态的方法，以免延迟对象的状态混乱。

 1     function fn(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();// 不会触发，状态在外部被修改了。
 5         });
 6         return deferred;
 7     }
 8     var newDeferred = fn();
 9     newDeferred.done(function(){
10         console.log(‘success‘);
11     }).fail(function(){
12         console.log(‘error‘);
13     });
14     newDeferred.reject(); // error

 1     function fn(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();// success
 5         });
 6         return deferred.promise();
 7     }
 8     var newDeferred = fn();
 9     newDeferred.done(function(){
10         console.log(‘success‘);
11     }).fail(function(){
12         console.log(‘error‘);
13     });
14     newDeferred.reject(); // 报错 reject方法不存在