對(duì)于$.ajax請(qǐng)求來說，如果層級(jí)比較多，程序看起來會(huì)比較亂，而為了解決這種問題，才有了$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í)行完成");
});

而對(duì)于這種ajax的封裝，在比較流行的node.js里也需要被看到，這就類似于方法的回調(diào)技術(shù)！

在使用ＭＶＶＭ的KO上，更加得心應(yīng)手，感覺$.when就是為了Knockoutjs而產(chǎn)生的！

//ＭＶＶＭ數(shù)據(jù)綁定
var MyModel = new model();
$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
MyModel.PeopleList = ko.observableArray(data);//先為對(duì)象賦值
}
})).done(function (data) {
ko.applyBindings(MyModel);//再綁定對(duì)象
});

以后我們?cè)谶M(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的用法詳解，希望對(duì)大家有所幫助，如果大家對(duì)此還有疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: