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使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
