jQuery中的promise

promise是许诺,承诺之意，表示对某事某人做出的协议承诺，预计承诺的内容会在未来某个时间点出现。

以上的英文原意就是promise的功能所在，接下来主要记录我在学习利用jQuery制作动画过程中对promise的学习:

1.从ajax的deferred开始

在jQuery早期的版本中(1.5.0前)，ajax代码是这样的:

$.ajax({
url:'',
method:'post',
data:data,
success:function(data){console.log('成功');},
error:function(){console.log('出错')}
});

以上的ajax将请求发送出去之后不需要在这里等待后台结果的返回，而是去继续执行后面的代码，通过设置callback来异步处理data，这里的ajax返回的是XHR对象无法进行链式调用。

在后面的jQuery版本中，开始引入promise的概念带到ajax中，之后我们可以这样使用:

$.ajax(url)
.done(function(data){console.log('成功')})
.fail(function(){console.log('失败')})
.always(function(){console.log('总是会执行')});

这里的ajax返回的是deferred对象，是可以进行链式调用的，所有后面可以继续执行其他操作。

2.普通操作中的deferred使用

在普通操作中去使用deferred，我主要是通过做连续的动画来学习的。

主要的方法有:

$.Deferred()　 生成一个可以链式调用的deferred对象

deferred.done() 操作成功时候的回调函数

deferred.fail() 操作失败时候的回调函数 deferred.always() 不管成功失败都会执行的回调函数

deferred.then() done和fail的合并形式

deferred.promise()返回一个新的deferred对象，当传入参数的时候，表示在参数对象上建立deferred接口

$.when()可以传入多个参数对象，为这些对象同时指定回调函数

deferred.resolve()将deferred对象的状态改变为已完成，表示操作完成

deferred.reject()将deferred对象的状态改变为已失败，表示操作失败

简单测试动画:

/* css */
#one{
background: red;
}
#two{
background: blue;
}
#there{
background: green;
}
.animation{
animation: move 5s ease-in forwards;
}
@keyframes move {
0%{
transform: rotateZ(0);
}
100%{
transform: translateX(600px) rotateZ(270deg);
}
}

<!--html-->
<div id="one">1</div>
<div id="two">2</div>
<div id="there">3</div>

/* js */
function one(){
var o = $.Deferred();
setTimeout(function(){
o.resolve();
},5000);
$('#one').addClass('animation');
return o.promise();
}
function two(){
var o = $.Deferred();
setTimeout(function(){
o.resolve();
},5000);
$('#two').addClass('animation');
return o.promise();
}
function th(){
var o = $.Deferred();
setTimeout(function(){
o.resolve();
},5000);
$('#there').addClass('animation');
return o.promise();
}
$.when().then(one).then(two).then(th);

只有通过resolve改变deferred状态为完成时才能继续执行then的回调函数。

以上只是通过一种方式实现的一个动画流，还可以通过上面介绍的其他方法完成相同的想过，不过思想都是相同的:创建deferred对象并返回，从而将一些列操作都链接在一条promise链上。