Jquery $when done then的用法詳解
對于$.ajax請求來說,如果層級比較多,程序看起來會比較亂,而為了解決這種問題,才有了$when...done...fail...then的封裝,它將$.ajax這嵌套結(jié)構(gòu)轉(zhuǎn)成了順序平行的結(jié)果,向下面的$.ajax寫法,看起來很亂
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
}
}
}
而它實(shí)現(xiàn)的功能無非就是外層執(zhí)行完成后,去執(zhí)行內(nèi)層的代碼代碼,看下面的$.when寫法,就清晰多了
$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
alert(JSON.stringify(data));
}
})).done(function (data) {
alert(data[0].Name);
}).done(function (data) {
alert(data[1].Name);
}).fail(function () {
alert("程序出現(xiàn)錯(cuò)誤!");
}).then(function (data) {
alert("程序執(zhí)行完成");
});
而對于這種ajax的封裝,在比較流行的node.js里也需要被看到,這就類似于方法的回調(diào)技術(shù)!
在使用MVVM的KO上,更加得心應(yīng)手,感覺$.when就是為了Knockoutjs而產(chǎn)生的!
//MVVM數(shù)據(jù)綁定
var MyModel = new model();
$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
MyModel.PeopleList = ko.observableArray(data);//先為對象賦值
}
})).done(function (data) {
ko.applyBindings(MyModel);//再綁定對象
});
以后我們在進(jìn)行前端開發(fā)時(shí),應(yīng)該多使用這種順序的,平行的代碼段,而少用嵌套的代碼段,這只是大叔個(gè)人的見解。
下面通過一個(gè)例子再給大家介紹jquery when then(done) 用法
//運(yùn)行條件jquery 1.82以上,直接運(yùn)行代碼,看結(jié)果
var log = function(msg){
window.console && console.log(msg)
}
function asyncThing1(){
var dfd = $.Deferred();
setTimeout(function(){
log('asyncThing1 seems to be done...');
dfd.resolve('1111');
},1000);
return dfd.promise();
}
function asyncThing2(){
var dfd = $.Deferred();
setTimeout(function(){
log('asyncThing2 seems to be done...');
dfd.resolve('222');
},1500);
return dfd.promise();
}
function asyncThing3(){
var dfd = $.Deferred();
setTimeout(function(){
log('asyncThing3 seems to be done...');
dfd.resolve('333');
},2000);
return dfd.promise();
}
/* do it */
$.when( asyncThing1(), asyncThing2(), asyncThing3() ).done(function(res1, res2, res3){
log('all done!');
log(res1 + ', ' + res2 + ', ' + res3);
})
以上所述是小編給大家介紹的Jquery $when done then的用法詳解,希望對大家有所幫助,如果大家對此還有疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的,在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法,涉及jQuery針對字符串的遍歷與轉(zhuǎn)換操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動(dòng)中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動(dòng)放大圖片插件示例,實(shí)現(xiàn)左右滑動(dòng)和放大效果,有興趣的可以了解一下。2017-02-02
基于jquery插件編寫countdown計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了jquery插件編寫countdown計(jì)時(shí)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06
Bookmarklet實(shí)現(xiàn)啟動(dòng)jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法, QQ云輸入法,都用到了bookmarklet技術(shù)。2010-09-09
jquery請求servlet實(shí)現(xiàn)ajax異步請求的示例
下面小編就為大家?guī)硪黄猨query請求servlet實(shí)現(xiàn)ajax異步請求的示例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
使用js+jquery實(shí)現(xiàn)無限極聯(lián)動(dòng)
本篇文章是對可擴(kuò)展的無限極聯(lián)動(dòng)下拉選項(xiàng)的實(shí)例進(jìn)行了分析介紹,需要的朋友參考下2013-05-05
基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過2013-12-12

