例：
var def = $.Deferred();
var prs1 = def.then(function (val) {
var result = val + "_123"
console.log(result);// 0_123
return result;;
});
var prs2 = prs1.then(function (val) {
var result = val + "_234"
console.log(result);// 0_123_234
return result;
});
var prs3 = prs2.then(function (val) {
var result = val + "_345"
console.log(result);// 0_123_234_345
return result;
});
def.resolve("0");
核心源码分析：
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function (newDefer) { //20170620 huanhua 当调用 jQuery.Deferred(参数) 参数不为空的时候，参数必须是 包含 $.Deferred()对象参数的函数
//if ( func ) { func.call( deferred, deferred );} 详见下面这段代码。
jQuery.each(tuples, function (i, tuple) {
var action = tuple[ 0 ],
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);
//20170620 huanhua 如果then方法传递的参数 [fnDone, fnFail, fnProgress],其中的函数如果返回的是 Defferred对象。
if (returned && jQuery.isFunction(returned.promise)) {
//20170620 huanhua 此时注册的 done/fail/progess 就是传入的 Defferred对象已经注册好了的对象
//20170624 huahua returned是一个 deferred,在 fn 里面，必须要调用 deferred.resolve/deferred.reject/deferred.notify
//否则不会 触发 newDefer.resolve/newDefer.reject/newDefer.notify
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},
里面最核心的一段代码，如下这段代码能看懂基本就看懂了 then了：
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply(this, arguments);
//20170620 huanhua 如果then方法传递的参数 [fnDone, fnFail, fnProgress],其中的函数如果返回的是 Defferred对象。
if (returned && jQuery.isFunction(returned.promise)) {
//20170620 huanhua 此时注册的 done/fail/progess 就是传入的 Defferred对象已经注册好了的对象
//20170624 huahua returned是一个 deferred,在 fn 里面，必须要调用 deferred.resolve/deferred.reject/deferred.notify
//否则不会 触发 newDefer.resolve/newDefer.reject/newDefer.notify
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
首先我们看一个案例：
var Person = function () {
var listdo = [];
var parValue = "";
this.fire = function (value) {
parValue = value;
for (var xh in listdo) {
listdo[xh](value);
}
};
this.do = function (fn) {
var prs = new Person();
if (typeof fn === "function") {
listdo.push(fn);
}
listdo.push(function () { prs.fire(parValue); });
return prs;
}
};
var person1 = new Person();
person1.do(function (val) { alert("孩子们：" + val); })
.do(function (val) { alert("孙子们：" + val); })
.do(function (val) { alert("重孙们：" + val); });
person1.fire("操练起来！！！");
这段代码中有一个祖孙的链式关系，通过闭包来实现的，分析见图2。
图2：
这个思路很重要，也是 then 实现的核心思想。
在then的源代码中有这么一段代码：
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
deferred[tuple[1]]就是在给 deferred[done|fail|progess]添加执行的方法
newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
这段代码就是添加的执行链式中下一个对象的方法。returned或者arguments就是传递到链式中下一个要执行的对象中的方法的参数。
如果这些都看懂了，then的实现原理就明白了，实现了一个按照 then添加的先后顺序进行执行的功能。