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链上。
