資源描述：
《jquery的promise與deferred對(duì)象在異步回調(diào)中的作用_jquery》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、jQuery的promise與deferred對(duì)象在異步回調(diào)中的作用一、麗S為了讓前端們從回調(diào)的地獄中回到天堂，jQuery也引入了Promise的概念。Promise是一種令代碼異步行為更加優(yōu)雅的抽象，冇了它，我們就可以像寫(xiě)同步代碼一樣去寫(xiě)異步代碼。jQuery從1.5版本開(kāi)始實(shí)現(xiàn)了CommonJSPromise/A規(guī)范這一重量級(jí)方案，不過(guò)沒(méi)有嚴(yán)格按照規(guī)范進(jìn)行實(shí)現(xiàn)，有一些API上的差異。好，讓我們來(lái)看看他們的特性吧（本文示例基于jquery1.8版本以上）。二、示例以前寫(xiě)動(dòng)価時(shí)，我們通常是這么干的：$('.animateEle，).a
2、nimate({opacity:'?5'},4000,function(){$('?animateEle2,)?animate({width/100px，},2000,function(){//這樣太傷了$('?einimatcElc3,)?3nimate({heightO'},2000);})；})；假如這么使用回調(diào)的話，那就太傷了。幸好，述有一些現(xiàn)成的Promise解決方案來(lái)優(yōu)雅地解決這種問(wèn)題。我們看看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);很明顯，更改后的代碼更易懂易讀了。但是，上面的代碼，有些細(xì)節(jié)的東西并沒(méi)有透露，一不小心，就容易出錯(cuò)，得不到我們想要的順序完成動(dòng)慚的效果。下而讓我們來(lái)全而理解jQuery捉供的promise和deferred對(duì)彖的方法，看看到底如何使用。三、promise和deffered對(duì)象方法promise對(duì)象其實(shí)就是deferred對(duì)象的特例，因?yàn)閜romise對(duì)象不能更改異步狀態(tài)，而deferred對(duì)彖可以。這點(diǎn)在他們的方法設(shè)計(jì)上，有著明顯的體現(xiàn)。1.promise對(duì)象方法通常，對(duì)于DOM,動(dòng)畫(huà)，ajax相關(guān)方法，我們都可以使
5、用promise方法。調(diào)用promise方法，返冋的是promise對(duì)象。可以鏈?zhǔn)秸{(diào)用promise方法。promise對(duì)象常見(jiàn)的方法有三個(gè)：done,fail,then。其它的方法就不要去記了，jqucry這里的接口方法太多了，在我看來(lái)挺啰嗦的,就跟早期的事件方法綁定一樣，live,delegate,bind,最終不是都?xì)w為on來(lái)管了么。代碼示例，如下：(1)D0M使用promise方法：varbox=$('#box');box.promise().done(function(ele){console,log(ele);//jQuer
6、ybox})；(2)Ajax使用promise方法(默認(rèn)返回一個(gè)promise對(duì)象，所以可以不必顯式調(diào)用promise方法)：$.postC/',{}).done(function(data){console.log(，請(qǐng)求成功');})?fa訂(function(){console.log(，請(qǐng)求錯(cuò)誤');})；動(dòng)慚示例已冇，就不重復(fù)列出了。1.deferred對(duì)象方法那么Deferred和Promise之間有什么區(qū)別呢？正如你在前面看到的，一個(gè)promise就是一個(gè)出異步函數(shù)返回的對(duì)象。當(dāng)你想要自己編寫(xiě)一個(gè)這樣的函數(shù)時(shí)你需要使用一個(gè)
7、deferredo一個(gè)deferred對(duì)象能做的和一個(gè)promise對(duì)象弟不多，但是它有兩個(gè)函數(shù)來(lái)觸發(fā)done()和fail()函數(shù)。一個(gè)deferred對(duì)象擁有一個(gè)resolve()函數(shù)來(lái)處理一個(gè)成功的結(jié)果并執(zhí)行與done()相關(guān)的函數(shù)。reject()函數(shù)則用來(lái)處理失敗的結(jié)果并執(zhí)行與fail()相關(guān)的函數(shù)。你可以給resolve()和reject()函數(shù)都提供參數(shù)，然后它們都將傳遞給與done()和failO相關(guān)的回調(diào)函數(shù)。promise對(duì)彖沒(méi)有resolve()和reject()函數(shù)。這是因?yàn)槟銓romise放到了其他的腳本中并
8、且你也不想promise去resolve或者reject一個(gè)promise。下面是一個(gè)關(guān)于deferred的簡(jiǎn)單例子。html僅僅是一個(gè)簡(jiǎn)單的擁有id屬性為”result的空div。$('Sresult5)
