DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery中的deferred使用方法
jQuery中的deferred使用方法
編輯:JQuery入門技巧     

deferred簡介

deferred對象是jQuery的回調函數解決方案,jQuery之前的版本中異步回調這塊做的不是很好,所以後期補上了該解決方案。

普遍的ajax操作方式

我們先來回顧一下jQuery中普通的ajax操作

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

1.5版本後的新寫法如下:

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

新版本的寫法相比老版本有一個優勢,就是可以自由添加多個回調函數並且按照添加順序執行:

$.ajax('test.html').done(function (res) {
 console.log('數據讀取成功');
}).fail(function () {
 console.log('數據讀取失敗');
}).done(function (res) {
 console.log('這是第二個成功的回調函數');
});

為多個ajax指定回調函數

我們可以通過when方法,為多個事件指定一個回調函數

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

為普通函數指定回調函數

前面說到的when是用於ajax方法,而ajax其實是deferred對象,如果不是ajax對象,換成普通的函數呢,直接使用when是不會有效果的,會直接執行done方法

所以我們需要手動新建一個deferred對象

var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
 var tasks = function () {
  console.log('執行完畢!');
  defer.resolve(); //改變deferred對象的執行狀態 - 成功
 };
 setTimeout(tasks, 5000);
 return defer;
};

這裡的resolve就是觸發done的,對應的reject方法則是用來調用fail方法的。

var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
 var tasks = function () {
  console.log('執行完畢!');
  defer. reject(); //改變deferred對象的執行狀態 - 失敗
 };
 setTimeout(tasks, 5000);
 return defer;
};

執行方法

$.when(wait(defer)).done(function (res) {
 console.log('數據讀取成功');
}).fail(function () {
 console.log('數據讀取失敗');
});

進一步優化

上面的代碼還有一些問題,defer是暴露在全局的,所以我們是可以通過在全局進行defer.resolve()來提前回調。

為了避免這種情況,jQuery提供了deferred.promise()方法,它的作用是在原來的deferred對象上返回另一個deferred對象,後者只開放與改變執行狀態無關的方法(比如done方法和fail方法)屏蔽與改變執行狀態有關的方法(比如resolve和reject方法)。

var defer = $.deferred(); //新建一個deferred對象
var wait = function (defer) {
 var tasks = function () {
  console.log('執行完畢!');
  defer.resolve(); //改變deferred對象的執行狀態 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait(defer)).done(function (res) {
 console.log('數據讀取成功');
}).fail(function () {
 console.log('數據讀取失敗');
});

也可以把defer包在函數中

// 普通方法
var wait = function () {
 var defer = $.deferred(); //新建一個deferred對象
 var tasks = function () {
  console.log('執行完畢!');
  defer.resolve(); //改變deferred對象的執行狀態 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait()).done(function (res) {
 console.log('數據讀取成功');
}).fail(function () {
 console.log('數據讀取失敗');
});
// 執行異步
var setAjax = function () {
 var defer = $.Deferred();
 if (xhr) {
  xhr.abort();
  xhr = null;
 }
 var xhr = $.ajax({
  url: 'test.html',
  success: function (res) {
   console.log('數據讀取成功');
   defer.resolve(res);
  },
  error: function () {
   console.log('數據讀取失敗');
   defer.reject();
  }
 });
 return defer.promise();
}
$.when(setAjax()).then(function (res) {
 console.log('數據讀取成功', res);
}, function () {
 console.log('數據讀取失敗');
});

以上所述是小編給大家介紹的jQuery中的derferred使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved