jQuery 源码学习 （五） 异步机制
异步机制
javascript编程往往会伴随着异步编程，比如远程获取数据,大量的异步编程会带来许多的回调函数，js是单线程的，所以完成异步往往需要借助浏览器事件驱动,这样会让我们的代码和算法变得支离破碎。jQuery就提供了一个抽象的 非阻塞 解决方案: Deferred。
认识异步
alert(1)
setTimeout(function(){
alert(2)
},0)
alert(3)
//alert(1)
//alert(3)
//alert(2)一、认识 Deferred对象
开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。
Deferred对象是在jquery 1.5版本被引进来的，jquery在回调方面的出处理不是很好，为此就诞生了deferred对象了。Deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。
二、ajax的链式操作
最开始写法是：
// < 1.5
$.ajax({
url: "test.html",
success: function(){
alert("哈哈，成功了！");
},
error:function(){
alert("出错啦！");
}
});如果jQuery的版本是1.5以下的，那么返回的是XHR对象，所以没法链式操作，但是高于1.5的版本的话，返回的是Deferred对象,可以进行链式操作。
// >=1.5
$.ajax("test.html")
.done(function(){
})
.fail(function(){
})done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。
三、指定同一操作的多个回调函数
deferred对象的一大好处，就是它允许你自由添加多个回调函数。
还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？
$.ajax("test.html")
.done(function(){ alert("哈哈，成功了！");} )
.fail(function(){ alert("出错啦！"); } )
.done(function(){ alert("第二个回调函数！");} );四、为多个操作指定回调函数
deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。那就是$.when()
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
//$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。五、普通操作的回调函数接口扩展
它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法，指定回调函数。
// 一个耗时操作
var wait = function(){
var task = function(){
alert('执行了');
};
setTimeout(5000);
}我们为其添加回调,可能会想到$.when();
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });但是没起到效果，done立即执行，原因是$.when()接受的是一个deferred对象。所以我们进一步改进吧
var dtd = $.Deferred();
var wait = function(){
var task = function(){
alert('执行了');
dtd.resolve(); // 改变deferred对象的执行状态
};
setTimeout(task, 5000);
return dd;
}这样wait()返回的是一个defferred对象了，这就可以上链式操作了。
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });六、defferred.resolve() 和 defferred.reject()
deferred采用的是Promise的原理。这里我们要清楚一个执行状态的概念。在defferred对象中，有着三种状态，未完成 已完成 已失败
如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；
如果执行状态是"已失败"，调用fail()方法指定的回调函数；
如果执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。
defferred.resolve()是将状态从未完成变为已完成。 ==> done()defferred.reject()是将状态从未完成变为了已失败。 ==> fail()
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(){
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd; // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
dtd.resolve();// 这里会立即先执行一次七、defferred.promise();
上面的方法是存在一些问题的，比如dtd是一个全局变量，他可以在外部被随时该边状态，这样就会使得done()或者fail()执行不只有一次。
这显然不是我们想要的，所以我们就需要defferred.promise的帮忙了。
它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。
var wait = function(dtd){
var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
};
var dd = wait();
// dd.resolve(); // 这里如果使用了的话，就会报错的哦，因为返回deferred.promise（）是无法对状态修改的哦
$.when(dd)
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });八、$.Defferred(wait)
另一种防止执行状态改变的方法是使用$.Defferred()
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
};
var ddd = wait();
// dd.resolve(); //这里报错了哦
$.Deferred(dd)
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });九、defferred对象小结
- $.Deferred() 生成一个deferred对象。
- deferred.done() 指定操作成功时的回调函数
- deferred.fail() 指定操作失败时的回调函数
- deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。
- deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。解决Deferred（延迟）对象，并根据给定的args参数调用任何完成回调函数（doneCallbacks）。
- deferred.resolveWith() 解决Deferred（延迟）对象，并根据给定的 context和args参数调用任何完成回调函数（doneCallbacks）。
- deferred.reject(args) 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。拒绝Deferred（延迟）对象，并根据给定的args参数调用任何失败回调函数（failCallbacks）。这里的args是一个对象。
- deferred.rejectWith(context, args) 拒绝Deferred（延迟）对象，并根据给定的 context和args参数调用任何失败回调函数（failCallbacks）。这里的args是一个数组类型。
- $.when() 为多个操作指定回调函数。除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。Context（上下文） 作为 this对象传递给失败回调函数（failCallbacks ）
- deferred.then()
有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。
$.when($.ajax( "/main.php" )) .then(successFunc, failureFunc );
如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。
- deferred.always() 这个方法也是用来指定回调函数的，它的作用是，不管调用的
deferred.resolve()还`是deferred.reject()，最后总是执行。
$.ajax( "test.html" )
.always( function() { alert("已执行！");} );- deferred.state() 确定一个Deferred（延迟）对象的当前状态。
- "pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").
- "resolved": Deferred对象是在解决状态，这意味着，deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问（或在被调用的过程中）
- "rejected": Deferred对象是在被拒绝的状态，这意味着，deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问（或在被调用的过程中） 。
这种方法主要是用在调试，例如，在准备拒绝（reject）一个延迟对象前，判断它是否已经处于 resolved 状态。
十、使用实例
情景1：当用户按下删除弹窗的确定或取消后，把弹窗隐藏，并执行对应的操作（删除或不执行），因为我们不知道用户什么时候会点击按钮，所以不能让弹窗阻塞其他任务的执行。
function pop(arg) {
if (!arg) {
console.error('pop title is empty');
}
var dfd = $.Deferred() //实例化一个延迟对象
,
confirmed //记录按下确定或取消
, $confirm = $content.find('button.confirm') //确认按钮
,
$cancel = $content.find('button.cancel'); //取消按钮
//定时器轮询，当按下确定或取消时触发删除或取消操作
timer = setInterval(function() {
if (confirmed !== undifined) {
dfd.resolve(confirmed);
clearInterval(timer);
dismiss_pop();
}
}, 50);
//点击确定时更改confirmed状态
$confirm.on('click', function() {
confirmed = true;
});
//点击取消时更改confirmed状态
$cancel.on('click', function() {
confirmed = false;
}); //返回dfd对象
return dfd.promise();
}
$('.delete').click(function() {
var $this = $(this);
var index = $this.data('index');
//当前的id //确定删除
pop('确定删除？').then(function(res) {
res ? delete_task(index) : null;
})
})参考文献