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 精粹读书笔记(1,2)
Feb 07 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JSONP跨域请求
Mar 02 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue-video-player 断点续播的实现
Feb 01 Vue.js
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开发框架的对比
2013/07/05 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
python批量提取word内信息
2015/08/09 Python
Python基于select实现的socket服务器
2016/04/13 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python 产生token及token验证的方法
2018/12/26 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python名片管理系统开发
2020/06/18 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
客服专员岗位职责
2014/02/28 职场文书
卖车协议书
2014/04/21 职场文书
党员教师一句话承诺
2014/05/30 职场文书
劳模先进事迹材料
2014/12/24 职场文书
英文产品推荐信
2015/03/27 职场文书
高中生军训感言
2015/08/01 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
MySQL 开窗函数
2022/02/15 MySQL