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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
vue 请求后台数据的实例代码
2017/06/22 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
python计算auc指标实例
2017/07/13 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
新闻编辑求职信
2014/04/09 职场文书
募捐倡议书
2014/04/14 职场文书
自主招生教师推荐信
2014/05/10 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书