這篇文章將為大家詳細(xì)講解有關(guān)deferred方法怎么在jQuery項(xiàng)目中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、太倉(cāng)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

deferred簡(jiǎn)介

deferred對(duì)象是jQuery的回調(diào)函數(shù)解決方案，jQuery之前的版本中異步回調(diào)這塊做的不是很好，所以后期補(bǔ)上了該解決方案。

普遍的ajax操作方式

我們先來(lái)回顧一下jQuery中普通的ajax操作

$.ajax({
 url: 'test.html',
 success: function (res) {
 console.log('數(shù)據(jù)讀取成功');
 },
 error: function () {
 console.log('數(shù)據(jù)讀取失敗');
 }
});

1.5版本后的新寫(xiě)法如下：

$.ajax('test.html').done(function (res) {
 console.log('數(shù)據(jù)讀取成功');
}).fail(function () {
 console.log('數(shù)據(jù)讀取失敗');
});

新版本的寫(xiě)法相比老版本有一個(gè)優(yōu)勢(shì)，就是可以自由添加多個(gè)回調(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('這是第二個(gè)成功的回調(diào)函數(shù)');
});

為多個(gè)ajax指定回調(diào)函數(shù)

我們可以通過(guò)when方法，為多個(gè)事件指定一個(gè)回調(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ù)

前面說(shuō)到的when是用于ajax方法，而ajax其實(shí)是deferred對(duì)象，如果不是ajax對(duì)象，換成普通的函數(shù)呢，直接使用when是不會(huì)有效果的，會(huì)直接執(zhí)行done方法

所以我們需要手動(dòng)新建一個(gè)deferred對(duì)象

var defer = $.deferred(); //新建一個(gè)deferred對(duì)象
var wait = function (defer) {
 var tasks = function () {
  console.log('執(zhí)行完畢！');
  defer.resolve(); //改變deferred對(duì)象的執(zhí)行狀態(tài) - 成功
 };
 setTimeout(tasks, 5000);
 return defer;
};

這里的resolve就是觸發(fā)done的，對(duì)應(yīng)的reject方法則是用來(lái)調(diào)用fail方法的。

var defer = $.deferred(); //新建一個(gè)deferred對(duì)象
var wait = function (defer) {
 var tasks = function () {
  console.log('執(zhí)行完畢！');
  defer. reject(); //改變deferred對(duì)象的執(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ù)讀取失敗');
});

進(jìn)一步優(yōu)化

上面的代碼還有一些問(wèn)題，defer是暴露在全局的，所以我們是可以通過(guò)在全局進(jìn)行defer.resolve()來(lái)提前回調(diào)。

為了避免這種情況，jQuery提供了deferred.promise()方法，它的作用是在原來(lái)的deferred對(duì)象上返回另一個(gè)deferred對(duì)象，后者只開(kāi)放與改變執(zhí)行狀態(tài)無(wú)關(guān)的方法（比如done方法和fail方法）屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法（比如resolve和reject方法）。

var defer = $.deferred(); //新建一個(gè)deferred對(duì)象
var wait = function (defer) {
 var tasks = function () {
  console.log('執(zhí)行完畢！');
  defer.resolve(); //改變deferred對(duì)象的執(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(); //新建一個(gè)deferred對(duì)象
 var tasks = function () {
  console.log('執(zhí)行完畢！');
  defer.resolve(); //改變deferred對(duì)象的執(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ù)讀取失敗');
});

關(guān)于deferred方法怎么在jQuery項(xiàng)目中使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：deferred方法怎么在jQuery項(xiàng)目中使用
文章位置：http://jinyejixie.com/article2/iishic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、搜索引擎優(yōu)化、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)