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，我主要是通过做连续的动画来学习的。
主要的方法有:

1. $.Deferred()　 生成一个可以链式调用的deferred对象
2. deferred.done() 操作成功时候的回调函数
3. deferred.fail() 操作失败时候的回调函数 deferred.always() 不管成功失败都会执行的回调函数
4. deferred.then() done和fail的合并形式
5. deferred.promise()返回一个新的deferred对象，当传入参数的时候，表示在参数对象上建立deferred接口
6. $.when()可以传入多个参数对象，为这些对象同时指定回调函数
7. deferred.resolve()将deferred对象的状态改变为已完成，表示操作完成
8. 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链上。