這篇文章主要介紹了jQuery的promise與deferred對象在異步回調中的作用,需要的朋友可以參考下
一、前言
為了讓前端們從回調的地獄中回到天堂， jQuery 也引入了 Promise 的概念。 Promise 是一種令代碼異步行為更加優雅的抽象，有了它，我們就可以像寫同步代碼一樣去寫異步代碼。 jQuery 從1.5版本開始實現了 CommonJS Promise/A 規范這一重量級方案，不過沒有嚴格按照規范進行實現，有一些API上的差異。
好，讓我們來看看他們的特性吧（ 本文示例基于jquery 1.8版本以上 ）。
二、示例
以前寫動畫時，我們通常是這么干的：
$('.animateEle').animate({
opacity:'.5'
}, 4000,function(){
$('.animateEle2').animate({
width:'100px'
},2000,function(){
// 這樣太傷了
$('.animateEle3').animate({
height:'0'
},2000);
});
});
假如這么使用回調的話，那就太傷了。幸好，還有一些現成的 Promise 解決方案來優雅地解決這種問題。
我們看看 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);
很明顯，更改后的代碼更易懂易讀了。
但是，上面的代碼，有些細節的東西并沒有透露，一不小心，就容易出錯，得不到我們想要的順序完成動畫的效果。下面讓我們來全面理解 jQuery 提供的 promise 和 deferred 對象的方法，看看到底如何使用。
三、promise和deffered對象方法
promise 對象其實就是 deferred 對象的特例，因為 promise 對象不能更改異步狀態，而 deferred 對象可以。這點在他們的方法設計上，有著明顯的體現。
1.promise對象方法
通常，對于DOM，動畫，ajax相關方法，我們都可以使用 promise 方法。調用 promise 方法，返回的是 promise 對象?？梢枣準秸{用 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 對象，所以可以不必顯式調用 promise 方法)：
$.post('/',{}).done(function(data){
console.log('請求成功');
}).fail(function(){
console.log('請求錯誤');
});
動畫示例已有，就不重復列出了。
2.deferred對象方法
那么Deferred和Promise之間有什么區別呢？正如你在前面看到的，一個promise就是一個由異步函數返回的對象。當你想要自己編寫一個這樣的函數時你需要使用一個deferred。
一個deferred對象能做的和一個promise對象差不多，但是它有兩個函數來觸發done()和fail()函數。
一個deferred對象擁有一個resolve()函數來處理一個成功的結果并執行與done()相關的函數。reject()函數則用來處理失敗的結果并執行與fail()相關的函數。
你可以給resolve()和reject()函數都提供參數，然后它們都將傳遞給與done()和fail()相關的回調函數。
promise對象沒有resolve()和reject()函數。這是因為你將promise放到了其他的腳本中并且你也不想promise去resolve或者reject一個promise。
下面是一個關于deferred的簡單例子。html僅僅是一個簡單的擁有id屬性為”result”的空div。
$('#result').html('waiting...');
var promise = wait();
promise.done(result);
function result() {
$('#result').html('done');
}
function wait() {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve();
}, 2000);
return deferred.promise();
}
其中，wait()函數返回了一個promise。它將在2s之后被解析。除了setTimeout之外，異步函數中所有的東西都能這樣使用，比如 動畫，Web worker等等。wait()函數中的代碼應該很清晰，我們使用了deferred對象，但是我們返回了一個限制的promise對象。
對于 deferred 對象呢，也就是使用 $.Deferred() 方法，以及 $.when() 等方法創造出來的對象，有如下的常用方法：
resolve , reject , notify ;
done , fail , progress ;
另外還有 promise 、 then 和 always 方法。
之所以這么排版，是因為他們是對應的，也就是說： resolve 方法會觸發 done 的回調執行， reject 會觸發 fail 的回調， notify 會觸發 progress 的回調。
直接看代碼：
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 函數中，返回的是個 promise 對象，而不是 deferred 對象。
要知道， promise 對象是沒有 resolve , reject , notify 等方法的，也就意味著，你無法針對 promise 對象進行狀態更改，只能在 done 或 fail 中進行回調配置。所以，你如果這么調用 wait(2500).resolve() 將會報錯，因為 wait(2500) 返回的是個 promise 對象，不存在 resolve 方法。
但是，這么做，有個好處，我們把 dtd 這個 deferred 對象放在了 wai t函數中，作為了局部變量，避免了全局的污染；進一步通過 promise 方法，轉化 dtd 這個 deferred 對象為 promise 對象，避免了函數 wait 外部可能發生的狀態更改（假如我們確實有這個需求）。
比如：
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 對象的狀態，這樣必然觸發該對象的 fail 回調函數。
對于 always 方法，從字面意思上就很容易理解， deferred 對象無論是 resolve 還是 reject ，都會觸發該方法的回調。
3.其它共性
此處講講 then 和 $.when 方法的使用。它們對 promise 對象也適用。
$.when 方法接受多個 deferred 對象或者純javascript對象，返回 promise 對象。
then 方法依次接受三個回調，分別為 deferred 對象 resolve , reject , notify 后觸發的回調，返回一個 promise 對象。注意，必須傳入函數，而該函數只有返回一個 promise 對象，才能夠讓異步事件按照預期順序來執行。
我們來看看最開始的動畫示例代碼， $.when(animate1()).then(animate2).then(animate3) ， $.when 方法中接受了一個 animate1 的函數執行結果，也就是得到了一個 promise 對象，而后的 then 中，則只是接受了一個變量名，這樣得到的結果是一個匿名的函數體，而該函數中返回的是 promise 對象。正好符合了我們對 then 接受參數的要求。
假如我們把執行語句改成： $.when(animate1()).then(animate2()).then(animate3()) ，這樣造成的結果就是三個動畫同步執行了。與 $.when(animate1(),animate2(),animate3()) 無異。
既然 then 是如此要求，那么與 then 方法類似的 done , fail , progress 也是一樣的。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
