對(duì)于$.ajax請(qǐng)求來(lái)說(shuō),如果層級(jí)比較多,程序看起來(lái)會(huì)比較亂,而為了解決這種問(wèn)題,才有了$when...done...fail...then的封裝,它將$.ajax這嵌套結(jié)構(gòu)轉(zhuǎn)成了順序平行的結(jié)果,向下面的$.ajax寫法,看起來(lái)很亂
$.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)的功能無(wú)非就是外層執(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ù)!
在使用MVVM的KO上,更加得心應(yīng)手,感覺(jué)$.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);//先為對(duì)象賦值 } })).done(function (data) { ko.applyBindings(MyModel);//再綁定對(duì)象 });
以后我們?cè)谶M(jìn)行前端開發(fā)時(shí),應(yīng)該多使用這種順序的,平行的代碼段,而少用嵌套的代碼段,這只是大叔個(gè)人的見解。
下面通過(guò)一個(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ì)此還有疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的,在此也非常感謝大家對(duì)綠夏網(wǎng)網(wǎng)站的支持!