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)無關(guān)的方法(比如done方法和fail方法)屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法(比如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)站的支持!
相關(guān)文章
jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
jquery 實現(xiàn)全選,反選,全不選等功能,下面直接以例子進行說明,需要的朋友可以參考下2012-10-10jquery使用jquery.zclip插件復制對象的實例教程
這篇文章主要介紹了jquery使用jquery.zclip插件復制對象的實例教程,當然也可以復制輸入框input、textarea等內(nèi)容,下面看代碼2013-12-12jQuery中使用了document和window哪些屬性和方法小結(jié)
未列出常見的比如document.getElementById(),object.addEventListener()等。2011-09-09