Jquery $when done then的用法详解

前端技术 2023/09/04 JavaScript

对于$.ajax请求来说，如果层级比较多，程序看起来会比较乱，而为了解决这种问题，才有了$when...done...fail...then的封装，它将$.ajax这嵌套结构转成了顺序平行的结果，向下面的$.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) {
}
}
}

而它实现的功能无非就是外层执行完成后，去执行内层的代码代码，看下面的$.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(\"程序出现错误！\");
}).then(function (data) {
alert(\"程序执行完成\");
});

而对于这种ajax的封装，在比较流行的node.js里也需要被看到，这就类似于方法的回调技术！

在使用ＭＶＶＭ的KO上，更加得心应手，感觉$.when就是为了Knockoutjs而产生的！

//ＭＶＶＭ数据绑定
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);//再绑定对象
});

以后我们在进行前端开发时，应该多使用这种顺序的，平行的代码段，而少用嵌套的代码段，这只是大叔个人的见解。

下面通过一个例子再给大家介绍jquery when then(done) 用法

//运行条件jquery 1.82以上，直接运行代码，看结果

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的用法详解，希望对大家有所帮助，如果大家对此还有疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/11695

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案