jquery源码分析(五)——Deferred 延迟对象

javascript的异步编程

  为什么要使用异步编程?

  JS是单线程语言,就简单性而言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题。然而从另一方面来看,它也暴露了实际开发中的一个严重问题,单线程环境看起来对用户请求响应迅速,但是当线程忙于处理其它事情时,就不能对用户的鼠标点击和键盘操作做出响应。因此提出了异步需求,以此来解放当前线程,可以处理其他业务,待回调请求数据返回再发起回来处理。

  何谓异步?关于这个问题,司徒正美给出以下解释:

  笼统地说,异步在javascript就是延时执行。严格来说,javascript中的异步编程能力都是由BOM与DOM提供的,如setTimeout,XMLHttpRequest,还有DOM的事件机制,还有HTML5新增加的webwork, postMessage,等等很多。这些东西都有一个共同的特点,就是拥有一个回调函数,实现控制反转。由于控制反转是更深奥的问题,这里不想展开。不过有点可以确认的,回调函数的存在打断了原来的执行流程,让它们自行在适当的时机出现并执行,这是个非常便捷的模式。对比主动式的轮询,你就知它多么节能。

相比在同步编程,代码基本上自上向下执行,在异步编程,处理异步请求或订阅返回结果的代码就要写到回调函数中,由于代码之间存在依赖,回调函数套回调函数的情况也司空见惯了,这种套嵌结构对以后的维护来说简直是地狱噩梦。由此引出另外一个我们不得不面对的问题,try...catch无法捕捉几毫秒之后发生的异常。另外,除了setTimeout外,异步编程基本上由事件机制承担的,它们的回调函数什么时候发生基本上都是未知数,可能由于后台发生系统级错误,无法再发出响应,或者,系统忙碌,一时半刻响应不过来,这两种情况我们也必需提供一个策略,中断这操作,也就是所谓的abort,这些都是异步编程的所要处理的课题

  

  Deferred对象是用来解决JS中的异步编程,它遵循 Common Promise/A 规范,在jQuery代码自身代码中有四处使用地方,分别是promise方法、DOM ready、ajax模块、动画模块。既然谈到 Common Promise/A 规范就先来了解下这个规范说了什么。

  Promise(中文翻译:承诺)其实为一个有限状态机,共有三种状态:pending(执行中)、resolve(执行成功)和rejected(执行失败)。

  其中pending为初始状态,resolve和rejected为结束状态(结束状态表示promise的生命周期已结束)。状态转换关系为:

    pending->resolve,pending->rejected。

  随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。promise以未完成的状态开始,如果成功它将会是完成态,如果失败将会是失败态。当一个promise移动到完成态,所有注册到它的成功回调将被调用,而且会将成功的结果值传给它。另外,任何注册到promise的成功回调,将会在状态机切换到完成状态以后立即被调用。

来看下代码的实现:

Deferred: function( func ) {
var tuples = [//依赖了Calback回调队列管理。
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],//tuples 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种状态
       state = "pending",
promise = {
state: function() {//state的get访问器:通过闭包访问状态机的状态,确保只能访问到Deferred对象的state,而无法修改state
return state;
},
always: function() {//无论最终状态为成功抑或是失败都会触发always,根据state执行deferred对象的成功回调或失败回调
deferred.done( arguments ).fail( arguments );
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {//逐一定义deferred对象成功、失败、执行中的处理函数执行之后的处理函数。
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function( obj ) {
return obj != null ? jQuery.extend( obj, promise ) : promise;
}
},
deferred = {}; // Keep pipe for back-compat
promise.pipe = promise.then; // Add list-specific methods
jQuery.each( tuples, function( i, tuple ) {//回调函数的存入
var list = tuple[ 2 ],
stateString = tuple[ 3 ]; // promise[ done | fail | progress ] = list.add
promise[ tuple[1] ] = list.add;//设计精妙,在状态机上挂载 done | fail | progress 方法,实际应用对应为Callback对象的add方法 // Handle state
if ( stateString ) {//如果存在最终状态:成功或失败都存在最终状态,处理中不存在undefined
list.add(function() {
// state = [ resolved | rejected ]
state = stateString; // [ reject_list | resolve_list ].disable; progress_list.lock
}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );//给当前回调队列Callback增加三个回调函数,i^1为异或 成功则修改失败回调队列disable(不执行),失败则修改成功回调队列disable不执行
} // deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {//定义触发函数
deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;
}); // Make the deferred a promise
promise.promise( deferred );//扩展deferred,继承promise属性——即赋予deferred对象状态机属性 // Call given func if any
if ( func ) {
func.call( deferred, deferred );
} // All done!
return deferred;
}, // Deferred helper
when: function( subordinate /* , ..., subordinateN */ ) {
var i = 0,
resolveValues = slice.call( arguments ),
length = resolveValues.length, // the count of uncompleted subordinates
remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0, // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
deferred = remaining === 1 ? subordinate : jQuery.Deferred(), // Update function for both resolve and progress values
updateFunc = function( i, contexts, values ) {
return function( value ) {
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
if ( values === progressValues ) {
deferred.notifyWith( contexts, values ); } else if ( !(--remaining) ) {
deferred.resolveWith( contexts, values );
}
};
}, progressValues, progressContexts, resolveContexts; // add listeners to Deferred subordinates; treat others as resolved
if ( length > 1 ) {
progressValues = new Array( length );
progressContexts = new Array( length );
resolveContexts = new Array( length );
for ( ; i < length; i++ ) {
if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
resolveValues[ i ].promise()
.done( updateFunc( i, resolveContexts, resolveValues ) )
.fail( deferred.reject )
.progress( updateFunc( i, progressContexts, progressValues ) );
} else {
--remaining;
}
}
} // if we're not waiting on anything, resolve the master
if ( !remaining ) {
deferred.resolveWith( resolveContexts, resolveValues );
} return deferred.promise();
}

(一)、首先来理解下deferred功能:

  1、异步队列是一个链式对象,增强对回调函数Callback的管理和调用,用于处理异步任务。

  2、异步队列有三种状态:处理中(progress),成功(resolved),失败(rejected)。

  3、执行哪些回调函数依赖于状态,状态变为成功(resolved)或失败(rejected)后,将保持不变。

  4、回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定

(二)、$.Deferred的实现

1、首先代码中定义tuples数组:这个数组是干嘛的呢?

    (1)、tuples[i][0]:定义deferred对象的触发回调函数列表执行(函数名):deferred.resolve,deferred.reject,deferred.notify

    (2)、tuples[i][1]:同上,定义添加回调函数的函数名:done、fail、progress

    (3)、tuples[i][2]:这里依赖$.Callbacks对象,用它创建了三个$.Callbacks对象,分别管理成功,失败,处理中回调函数队列

    (4)、tuples[i][3]:deferred最终状态(第三组数据除外): 定义了成功最终状态(resolved),失败的最终状态(rejected)

  2、创建了一个状态机promise对象,具有state、always、then、primise方法

(1)state:获取闭包属性state。默认pending;

    (2)always:设置deferred对象成功和失败处理队列,根据state执行deferred对象的成功回调或失败回调

    (3)then:

    (4)promise:将赋予对象状态机特性(内部同过$.extend来扩展),即新对象将拥有state、always、then、primise方法,即状态机的属性

  3、jQuery.each遍历tuples:设置promise对象done,fail,progress属性引用Callback对象add方法,同时给deferred对象扩充6个方法

    (1)resolve/reject/notify 类似 Callbacks.fire,调用对应**With,执行回调函数

    (2)resolveWith/rejectWith/notifyWith 是 Callbacks.fireWith 队列方法引用

  4、通过扩展primise对象生成最终的Deferred对象,返回该对象。如下图:

jquery源码分析(五)——Deferred 延迟对象

从上图可以清晰看出:deferred对象的state、always 、promise、then是从promise对象扩展而来的,其他方法pipe <==>then ,

done、fail、progress是对象三个Callback对象的回调add方法;——回调方法/事件订阅

reject、resolve、notify为触发相应执行回调队列的fire方法——通知方法/事件发布

rejectWith、resolveWith、notifyWith为执行相应回调队列的fireWidth方法——通知方法/事件发布

 (三)、具体来分析deferred对象上的方法:

  (1)、deferred.done()——  订阅状态为成功(resolved)时回调函数,保存到对应的Callback对象

  (2)、deferred.fail()——  订阅状态为失败(rejected)时回调函数,保存到对应Callback对象

  (3)、deferred.progress()——订阅状态为处理中(pending)时回调函数,保存到对应Callback对象

  (4)、deferred.then()——增加成功回调函数和失败回调函数到各自的队列中;两个参数可以是数组或null,状态为成功(resolved)时立即调用成功回调函数,状态为失败(rejected)时立即调用失败回调函数

  (5)、deferred.always()——增加回调函数,同时增加到成功队列和失败队列,状态已确定(无论成功或失败)时立即调用回调函数

  (6)、deferred.resolve()——通过调用deferred.resolveWith()实现成功回调函数队列调用

  (7)、deferred.resolveWith()——使用指定的上下文和参数执行成功回调函数

  (8)、deferred.reject()——通过调用deferred.rejectWith()实现失败回调函数队列调用

  (9)、deferred.rejectWith()——使用指定的上下文和参数执行成功回调函数

  (10)、deferred.pipe()——每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数,并将过滤函数的返回值作为回调函数的参数最终返回一个只读视图(调用promise实现)

  (11)、deferred.promise()——返回deferred的只读视图

 (四)、$.when的实现

  1. 接受若干个对象,参数仅一个且非Deferred对象将立即执行回调函数
  2. Deferred对象和非Deferred对象混杂时,对于非Deferred对象remaining减1
  3. Deferred对象总数 = 内部构建的Deferred对象 + 所传参数中包含的Deferred对象
  4. 所传参数中所有Deferred对象每当resolve时remaining减1,直到为0时(所有都resolve)执行回调

(五)、大家可能对ajax异步回调比较熟悉,那下面用ajax分析如何使用deferred对象。

(1) done/resolve

function cb() {

  alert('success')
}
var deferred = $.Deferred()
deferred.done(cb)
setTimeout(function() {
    deferred.resolve()
}, 3000)
这里使用setTimeout来模拟ajax请求(下同),在HTTP中表示后台返回成功状态(如200)时使用,执行deferred.resolve(),则会触发请求成功后的回调函数cb。
 

(2)、fail/reject

function cb() {

    alert('fail')
}
var deferred = $.Deferred()
deferred.fail(cb)
setTimeout(function() {
    deferred.reject()
}, 3000)

在HTTP中表示后台返回非成功状态时使用,执行deferred.resolve() ,触发请求失败后的回调函数alert(fail)。

(3)、progress/notify

function cb() {

    alert('progress')
}
var deferred = $.Deferred()
deferred.progress(cb)
setInterval(function() {
    deferred.notify()
}, 2000)

注意到没有,这里使用在setInterval来模拟,HTTP中表示请求过程中使用,请求过程中不断执行deferred.notify(),即不断执行回调函数。这可用在文件上传时的loading百分比或进度条。

(4)、便利函数then,一次添加成功,失败,进度回调函数

function fn1() {

alert('success')
}
function fn2() {
    alert('fail')
}
function fn3() {
    alert('progress')
}
var deferred = $.Deferred()
deferred.then(fn1, fn2, fn3)

调用then后还可以继续链式调用then添加多个不同回调函数,这个then也正是jQuery对 Common Promise/A 的实现。

(5)、使用always方法为成功,失败状态添加同一个回调函数

var deferred = $.Deferred()
deferred.always(function() {
    var state = deferred.state()
    if ( state === 'resolved') {
        alert('success')
    } else if (state === 'rejected') {
        alert('fail')
    }
})
setTimeout(function() {
    deferred.resolve()
    //deferred.reject()
}, 3000)

回调函数中可以使用deferred.state方法获取异步过程中的最终状态,这里我调用的是deferred.resolve,因此最后的状态是resolved,表示成功。

(6)、when方法保证多个异步操作全部成功后才回调

function fn1() {
    alert('done1')
}
function fn2() {
    alert('done2')
}
function fn3() {
    alert('all done')
}
 
var deferred1 = $.Deferred()
var deferred2 = $.Deferred()
 
deferred1.done(fn1)
deferred2.done(fn2)
$.when(deferred1, deferred2).done(fn3)
 
setTimeout(function() {
    deferred1.resolve()
    deferred2.resolve()
}, 3000)

先后弹出了done1、done2、all done。 如果setTimeout中有一个reject了,fn3将不会被执行。

(7)、如果多个请求完成后才算成功,1.5之前的是无法解决的,现在则可以用$.when搞定

var ajax1 = $.ajax(url1)
var ajax2 = $.ajax(url2)
$.when(ajax1, ajax2).done(success)

上一篇:bootstrap-按钮样式


下一篇:return,exit,die