jQuery deffered和promise對象方法

Render 發(fā)布于2019-08-19 14:53 / 2919人閱讀

摘要：三和對象方法對象其實就是對象的特例，因為對象不能更改異步狀態(tài)，而對象可以。方法依次接受三個回調(diào)，分別為對象后觸發(fā)的回調(diào)，返回一個對象。注意，必須傳入函數(shù)，而該函數(shù)只有返回一個對象，才能夠讓異步事件按照預期順序來執(zhí)行。對象的方法對象和對象

一、前言

為了讓前端們從回調(diào)的地獄中回到天堂，jQuery也引入了Promise的概念。Promise是一種令代碼異步行為更加優(yōu)雅的抽象，有了它，我們就可以像寫同步代碼一樣去寫異步代碼。jQuery從1.5版本開始實現(xiàn)了CommonJS Promise/A規(guī)范這一重量級方案，不過沒有嚴格按照規(guī)范進行實現(xiàn)，有一些API上的差異。

好，讓我們來看看他們的特性吧（本文示例基于jQuery 1.8版本以上）。

二、示例

以前寫動畫時，我們通常是這么干的：

$(".animateEle").animate({
    opacity:".5"
}, 4000,function(){
    $(".animateEle2").animate({
        width:"100px"
    },2000,function(){
        // 這樣太傷了
        $(".animateEle3").animate({
            height:"0"
        },2000);
    });
});

假如這么使用回調(diào)的話，那就太傷了。幸好，還有一些現(xiàn)成的Promise解決方案來優(yōu)雅地解決這種問題。

我們看看jQuery提供的解決辦法。

var animate1 = function() {
    return $(".animateEle1").animate({opacity:".5"},4000).promise();
};
var animate2 = function() {
    return $(".animateEle2").animate({width:"100px"},2000).promise();
};
var animate3 = function(){
    return $(".animateEle3").animate({height:"0"},2000).promise();
};
// so easy,有木有，so clear，有木有
$.when(animate1()).then(animate2).then(animate3);

很明顯，更改后的代碼更易懂易讀了。

但是，上面的代碼，有些細節(jié)的東西并沒有透露，一不小心，就容易出錯，得不到我們想要的順序完成動畫的效果。下面讓我們來全面理解jQuery提供的Promise和deferred對象的方法，看看到底如何使用。

三、promise和deffered對象方法

Promise對象其實就是deferred對象的特例，因為Promise對象不能更改異步狀態(tài)，而deferred對象可以。這點在他們的方法設計上，有著明顯的體現(xiàn)。

1.promise對象方法

通常，對于DOM，動畫，ajax相關(guān)方法，我們都可以使用Promise方法。調(diào)用Promise方法，返回的是Promise對象。可以鏈式調(diào)用Promise方法。

promise對象常見的方法有三個：done，fail，then。

其它的方法就不要去記了，jQuery這里的接口方法太多了，在我看來挺啰嗦的，就跟早期的事件方法綁定一樣，live，delegate，bind，最終不是都歸為on來管了么。

代碼示例，如下：

1.DOM使用Promise方法：

var box=$("#box");
box.promise().done(function(ele){
    console.log(ele);//jQuery box
});

2.Ajax使用Promise方法(默認返回一個Promise對象，所以可以不必顯式調(diào)用Promise方法)：

$.post("/",{}).done(function(data){
    console.log("請求成功");
}).fail(function(){
    console.log("請求錯誤");
});

動畫示例已有，就不重復列出了。

2.deferred對象方法

對于deferred對象呢，也就是使用$.Deferred()方法，以及$.when()等方法創(chuàng)造出來的對象，有如下的常用方法：

resolve,reject,notify;

done,fail,progress;

另外還有promise、then和always方法。

之所以這么排版，是因為他們是對應的，也就是說：resolve方法會觸發(fā)done的回調(diào)執(zhí)行，reject會觸發(fā)fail的回調(diào)，notify會觸發(fā)progress的回調(diào)。

直接看代碼：

var wait = function(ms) {
    var dtd = $.Deferred();
    setTimeout(dtd.resolve, ms);
    // setTimeout(dtd.reject, ms);
    // setTimeout(dtd.notify, ms);
    return dtd.promise(); //此處也可以直接返回dtd
};

wait(2500).done(function() {
    console.log("haha,師太，你可讓老衲久等了");
}).fail(function() {
    console.log("失敗了");
}).progress(function(res) {
    console.log("等待中...");
});

我們看到了，上面的代碼中，在wait函數(shù)中，返回的是個Promise對象，而不是deferred對象。

要知道，Promise對象是沒有resolve,reject,notify等方法的，也就意味著，你無法針對Promise對象進行狀態(tài)更改，只能在done或fail中進行回調(diào)配置。所以，你如果這么調(diào)用wait(2500).resolve()將會報錯，因為wait(2500)返回的是個Promise對象，不存在resolve方法。

但是，這么做，有個好處，我們把dtd這個deferred對象放在了wait函數(shù)中，作為了局部變量，避免了全局的污染；進一步通過Promise方法，轉(zhuǎn)化dtd這個deferred對象為Promise對象，避免了函數(shù)wait外部可能發(fā)生的狀態(tài)更改（假如我們確實有這個需求）。

比如：

var wait = function(ms) {
    var dtd = $.Deferred();
    setTimeout(dtd.resolve, ms);
    // setTimeout(dtd.reject, ms);
    // setTimeout(dtd.notify, ms);
    return dtd; //此處也可以直接返回dtd
};

wait(2500).reject().fail(function(){
    console.log("失敗了...............");
});

我們在外部更改了wait返回的deferred對象的狀態(tài)，這樣必然觸發(fā)該對象的fail回調(diào)函數(shù)。

對于always方法，從字面意思上就很容易理解，deferred對象無論是resolve還是reject，都會觸發(fā)該方法的回調(diào)。

3.其它共性

此處講講then和$.when方法的使用。它們對Promise對象也適用。

$.when方法接受多個deferred對象或者純javascript對象，返回Promise對象。

then方法依次接受三個回調(diào)，分別為deferred對象resolve,reject,notify后觸發(fā)的回調(diào)，返回一個Promise對象。注意，必須傳入函數(shù)，而該函數(shù)只有返回一個Promise對象，才能夠讓異步事件按照預期順序來執(zhí)行。

我們來看看最開始的動畫示例代碼，$.when(animate1()).then(animate2).then(animate3)，$.when方法中接受了一個animate1的函數(shù)執(zhí)行結(jié)果，也就是得到了一個Promise對象，而后的then中，則只是接受了一個變量名，這樣得到的結(jié)果是一個匿名的函數(shù)體，而該函數(shù)中返回的是Promise對象。正好符合了我們對then接受參數(shù)的要求。

假如我們把執(zhí)行語句改成：$.when(animate1()).then(animate2()).then(animate3())，這樣造成的結(jié)果就是三個動畫同步執(zhí)行了。與$.when(animate1(),animate2(),animate3())無異。

既然then是如此要求，那么與then方法類似的done,fail,progress也是一樣的。

四、參考文章

因為jQuery deffered和promise對象方法使用起來比較繁瑣，接口太多，同樣一件事兒，你可以有好幾種寫法。所以，某些接口方法可能會被廢棄。若要使用其它方法，請去官網(wǎng)參考。

jQuery deferred 對象的 promise 方法

Promise對象和Deferred對象

云服務器 GPU云服務器 jquery_promise實現(xiàn) jquery_promise異步對象jquery deffered

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78168.html

發(fā)表評論

登陸后可評論

0條評論

Render

男|高級講師

我要關(guān)注我要私信

TA的文章

力扣周結(jié)03

閱讀 1118·2021-11-23 09:51
CloudCone：黑色星期五預售促銷，洛杉磯MC機房大硬盤KVM VPS年付$14.2起

閱讀 1081·2021-10-18 13:31
認證常用主機什么意思-ps4怎么認證為常用主機？

閱讀 2991·2021-09-22 16:06
微軟全新Windows Server 2022正式發(fā)布，附鏡像免費下載地址

閱讀 4284·2021-09-10 11:19
10.24開發(fā)者狂歡節(jié)，這里有一波福（現(xiàn)）利（金）送（紅）你（包）

閱讀 2206·2019-08-29 17:04
$q 實例分析 Angular 中的 Promise

閱讀 437·2019-08-29 10:55
UCloud管理外網(wǎng)彈性IP

閱讀 2485·2019-08-26 16:37
一篇文章讓你學會如何選擇 JS HTTP 請求庫

閱讀 3381·2019-08-26 13:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery deffered和promise對象方法

相關(guān)文章

前后分離模型之封裝 Api 調(diào)用

通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

js手動實現(xiàn)promise

Promise-resolve流程源碼剖析

JS魔法堂：深究JS異步編程模型

發(fā)表評論

0條評論

Render

男|高級講師

TA的文章

力扣周結(jié)03

CloudCone：黑色星期五預售促銷，洛杉磯MC機房大硬盤KVM VPS年付$14.2起

認證常用主機什么意思-ps4怎么認證為常用主機？

微軟全新Windows Server 2022正式發(fā)布，附鏡像免費下載地址

10.24開發(fā)者狂歡節(jié)，這里有一波福（現(xiàn)）利（金）送（紅）你（包）

$q 實例分析 Angular 中的 Promise

UCloud管理外網(wǎng)彈性IP

一篇文章讓你學會如何選擇 JS HTTP 請求庫

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery deffered和promise對象方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！