jQuery中的deferred使用方法
deferred簡介
deferred對象是jQuery的回調(diào)函數(shù)解決方案，jQuery之前的版本中異步回調(diào)這塊做的不是很好，所以后期補上了該解決方案。
普遍的ajax操作方式
我們先來回顧一下jQuery中普通的ajax操作
$.ajax({
url: 'test.html',
success: function (res) {
console.log('數(shù)據(jù)讀取成功');
},
error: function () {
console.log('數(shù)據(jù)讀取失敗');
}
});
1.5版本后的新寫法如下：
$.ajax('test.html').done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
});
新版本的寫法相比老版本有一個優(yōu)勢，就是可以自由添加多個回調(diào)函數(shù)并且按照添加順序執(zhí)行：
$.ajax('test.html').done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
}).done(function (res) {
console.log('這是第二個成功的回調(diào)函數(shù)');
});
為多個ajax指定回調(diào)函數(shù)
我們可以通過when方法，為多個事件指定一個回調(diào)函數(shù)
$.when($.ajax('test.html'), $.ajax('test2.html')).done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
});
為普通函數(shù)指定回調(diào)函數(shù)
前面說到的when是用于ajax方法，而ajax其實是deferred對象，如果不是ajax對象，換成普通的函數(shù)呢，直接使用when是不會有效果的，會直接執(zhí)行done方法
所以我們需要手動新建一個deferred對象
var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
var tasks = function () {
console.log('執(zhí)行完畢！');
defer.resolve(); //改變deferred對象的執(zhí)行狀態(tài) - 成功
};
setTimeout(tasks, 5000);
return defer;
};
這里的resolve就是觸發(fā)done的，對應的reject方法則是用來調(diào)用fail方法的。
var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
var tasks = function () {
console.log('執(zhí)行完畢！');
defer. reject(); //改變deferred對象的執(zhí)行狀態(tài) - 失敗
};
setTimeout(tasks, 5000);
return defer;
};
執(zhí)行方法
$.when(wait(defer)).done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
});
進一步優(yōu)化
上面的代碼還有一些問題，defer是暴露在全局的，所以我們是可以通過在全局進行defer.resolve()來提前回調(diào)。
為了避免這種情況，jQuery提供了deferred.promise()方法，它的作用是在原來的deferred對象上返回另一個deferred對象，后者只開放與改變執(zhí)行狀態(tài)無關的方法（比如done方法和fail方法）屏蔽與改變執(zhí)行狀態(tài)有關的方法（比如resolve和reject方法）。
var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
var tasks = function () {
console.log('執(zhí)行完畢！');
defer.resolve(); //改變deferred對象的執(zhí)行狀態(tài) - 成功
};
setTimeout(tasks, 5000);
return defer.promise();
};
$.when(wait(defer)).done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
});
也可以把defer包在函數(shù)中
// 普通方法
var wait = function () {
var defer = $.deferred(); //新建一個deferred對象
var tasks = function () {
console.log('執(zhí)行完畢！');
defer.resolve(); //改變deferred對象的執(zhí)行狀態(tài) - 成功
};
setTimeout(tasks, 5000);
return defer.promise();
};
$.when(wait()).done(function (res) {
console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
console.log('數(shù)據(jù)讀取失敗');
});
// 執(zhí)行異步
var setAjax = function () {
var defer = $.Deferred();
if (xhr) {
xhr.abort();
xhr = null;
}
var xhr = $.ajax({
url: 'test.html',
success: function (res) {
console.log('數(shù)據(jù)讀取成功');
defer.resolve(res);
},
error: function () {
console.log('數(shù)據(jù)讀取失敗');
defer.reject();
}
});
return defer.promise();
}
$.when(setAjax()).then(function (res) {
console.log('數(shù)據(jù)讀取成功', res);
}, function () {
console.log('數(shù)據(jù)讀取失敗');
});
以上所述是小編給大家介紹的jQuery中的derferred使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法
本文給大家介紹jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法，涉及到uploadify上傳錯誤302相關問題，對本文感興趣的朋友一起看看吧2015-12-12
jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能
這篇文章主要介紹了jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
getJSON調(diào)用后臺json數(shù)據(jù)時函數(shù)被調(diào)用兩次的原因猜想
近期在做前端開發(fā)時候使用到getJSON調(diào)用后臺json數(shù)據(jù)，發(fā)現(xiàn)后臺的函數(shù)被調(diào)用兩次，函數(shù)名稱為getMessages，下面是本人的一些猜想，感興趣的朋友可以參考下2013-09-09
本篇文章主要是對jquery遍歷checkbox的注意事項進行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
今天終于有時間把我以前寫的一個jQuery插件進行整理，改進。這是一個模擬“模式對話框”的插件，該模式對話框共有三種皮膚，紅、綠、藍。2009-09-09
擴展對input的一些方法(練習jQuery插件)2009-10-10
這篇文章主要介紹了jquery實現(xiàn)的V字形顯示效果代碼,涉及jQuery數(shù)學運算及樣式操作的相關技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jquery實現(xiàn)漂亮的二級下拉菜單代碼,涉及jquery鼠標click事件控制頁面class屬性動態(tài)變換效果的切換技巧,非常美觀實用,需要的朋友可以參考下2015-08-08
jQuery 獲取跨域XML(RSS)數(shù)據(jù)的相關總結分析
下面小編就為大家?guī)硪黄猨Query 獲取跨域XML(RSS)數(shù)據(jù)的相關總結分析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jquery分割字符串的方法,涉及jQuery中使用split方法進行字符串分割的相關技巧,需要的朋友可以參考下2015-06-06