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 相关文章推荐
js 页面输出值
Nov 30 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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
单点登录 Ucenter示例分析
2013/10/29 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python求解平方根的方法
2015/03/11 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python在协程中增加任务实例操作
2021/02/28 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2014年服务员工作总结
2014/11/18 职场文书
诚信承诺书
2015/01/19 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js