Jquery $when done then的用法详解


Posted in Javascript onMay 20, 2016

对于$.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里也需要被看到,这就类似于方法的回调技术!

在使用MVVM的KO上,更加得心应手,感觉$.when就是为了Knockoutjs而产生的!

//MVVM数据绑定
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的用法详解,希望对大家有所帮助,如果大家对此还有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Vue.js图片预览插件使用详解
Aug 27 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
BootStrap3学习笔记(一)之网格系统
May 20 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python实现udp传输图片功能
2020/03/20 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
销售冠军获奖感言
2014/02/03 职场文书
环保倡议书范文
2014/05/12 职场文书
爱心助学感谢信
2015/01/21 职场文书
第一军规观后感
2015/06/12 职场文书
大学开学感言
2015/08/01 职场文书