资源描述：
《jquery的promise与deferred对象在异步回调中的作用_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、jQuery的promise与deferred对象在异步回调中的作用一、丽S为了让前端们从回调的地狱中回到天堂，jQuery也引入了Promise的概念。Promise是一种令代码异步行为更加优雅的抽象，冇了它，我们就可以像写同步代码一样去写异步代码。jQuery从1.5版本开始实现了CommonJSPromise/A规范这一重量级方案，不过没有严格按照规范进行实现，有一些API上的差异。好，让我们來看看他们的特性吧（本文示例基于jquery1.8版本以上）。二、示例以前写动価时，我们通常是这么干的：$('.animateEle，).a
2、nimate({opacity:'・5'},4000,function(){$('・animateEle2,)・animate({width/100px，},2000,function(){//这样太伤了$('・einimatcElc3,)・3nimate({heightO'},2000);})；})；假如这么使用回调的话，那就太伤了。幸好，述有一些现成的Promise解决方案来优雅地解决这种问题。我们看看jQuery提供的解决办法。varanimatel二function(){return$('・3nimatcElcr)・3nimat
3、e({opacity:'・5'},4000)・promise();}；varanimate2=function(){return$(，.animateEle2,).animate({width100px，},2000).promise();}；varamimatc3=function(){return$('・animateEle3,)・animate({height:，O'},2000).promise();}；//soeasy,有木有，soclear,有木有$.when(animatel()).then(animate2).then(
4、animate3);很明显，更改后的代码更易懂易读了。但是，上面的代码，有些细节的东西并没有透露，一不小心，就容易出错，得不到我们想要的顺序完成动慚的效果。下而让我们来全而理解jQuery捉供的promise和deferred对彖的方法，看看到底如何使用。三、promise和deffered对象方法promise对象其实就是deferred对象的特例，因为promise对象不能更改异步状态，而deferred对彖可以。这点在他们的方法设计上，有着明显的体现。1.promise对象方法通常，对于DOM,动画，ajax相关方法，我们都可以使
5、用promise方法。调用promise方法，返冋的是promise对象。可以链式调用promise方法。promise对象常见的方法有三个：done,fail,then。其它的方法就不要去记了，jqucry这里的接口方法太多了，在我看来挺啰嗦的,就跟早期的事件方法绑定一样，live,delegate,bind,最终不是都归为on来管了么。代码示例，如下：(1)D0M使用promise方法：varbox=$('#box');box.promise().done(function(ele){console,log(ele);//jQuer
6、ybox})；(2)Ajax使用promise方法(默认返回一个promise对象，所以可以不必显式调用promise方法)：$.postC/',{}).done(function(data){console.log(，请求成功');})・fa订(function(){console.log(，请求错误');})；动慚示例已冇，就不重复列出了。1.deferred对象方法那么Deferred和Promise之间有什么区别呢？正如你在前面看到的，一个promise就是一个出异步函数返回的对象。当你想要自己编写一个这样的函数时你需要使用一个
7、deferredo一个deferred对象能做的和一个promise对象弟不多，但是它有两个函数來触发done()和fail()函数。一个deferred对象拥有一个resolve()函数來处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。你可以给resolve()和reject()函数都提供参数，然后它们都将传递给与done()和failO相关的回调函数。promise对彖没有resolve()和reject()函数。这是因为你将promise放到了其他的脚本中并
8、且你也不想promise去resolve或者reject一个promise。下面是一个关于deferred的简单例子。html仅仅是一个简单的拥有id属性为”result的空div。$('Sresult5)
