jQuery: Deferred

Posted 2020-10-08

 通过对Callbacks 的了解，也知道了通过Callback怎么来实现异步回调（也可以称为延迟回调）。

上一节末，提到了一个问题，在延迟（异步）操作中，会面临成功、失败两种肯能性。也给出了用Callbacks来处理这两种情形的解决方案。但是觉得太麻烦了。这一节就用Deferred来解决该问题。

Deferred，是jQuery为我们提供更加强大的基于Callbacks实现的延迟处理（异步处理）工具。使用它可以很方便的解决前面的问题。此外要说明的是，Deferred在Python，Java，Dojo中都有同样的类库，有兴趣的童鞋可以了解一下。

其实呢，在Deferred的内部，是有三个Callbacks对象的：doneCallbacks （成功时使用的回调链）, failCallbacks（失败时使用的回调链）, progressCallbacks（处理进度的回调链）。

 

不管是使用Callbacks，还是使用Deferred，都不可避免的有两个过程：1）注册回调函数，2）触发回调。Deferred中既然有了这三个Callbacks，那么自然就有了与之对应的注册函数，触发回调的函数。

	注册方法	触发方法
doneCallbacks	done(failCbs)	resolve resolveWith
failCallbacks	fail(failCbs)	reject rejectWith
progressCallbacks	progress(progressCbs)	notify notifyWith
通用的	then（doneCbs,failCbs,progCbs）
	Always(cbs) 不论成功或失败都会调用

 

上面的注册方法，底层就是调用的Callbacks对象的add方法，同理resolve方法底层就是调用的是Callbacks对象的fire,fireWith方法。

 

下面用Deferred来实现延迟回调：

 

$(function(){
                function fn1(value){
                    console.log(arguments.length,value);
                }

                function fn2(value){
                    return "fn2, " + value;
                }

                function fn3(value){
                    fn1(fn2(value));
                }
                debugger;
                var deferred = jQuery.Deferred(function(deferred){                
                    var success = new Date().getTime()/2==1;
                    if(success){
                        deferred.resolve("success");
                    }else{
                        deferred.reject("fail");
                    }
                });
                
                deferred.done(fn1).fail(fn3);                
                
            });

 

  

在开发中，我们可能会遇到更加复杂的情况，需要执行多个延迟操作，然后根据这多个延迟操作的结果进行回调处理。此时该如何应对呢？

$(function(){
                function fn1(value){
                    console.log(arguments.length,value);
                }

                function fn2(value){
                    return "fn2, " + value;
                }

                function fn3(value){
                    fn1(fn2(value));
                }

                var deferred1 = jQuery.Deferred(function(deferred){
                        var success = new Date().getTime()/2==1;
                        if(success){
                            deferred.resolve("success");
                        }else{
                            deferred.reject("fail");
                        }

                    });
                
                var deferred2 = jQuery.Deferred(function(deferred){
                        var success = new Date().getTime()/3==0;
                        if(success){
                            deferred.resolve("success");
                        }else{
                            deferred.reject("fail");
                        }

                    });
                    
                var deferred = jQuery.when(deferred1, deferred2);                
                deferred.done(fn1).fail(fn3);                            
            });