使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享


Posted in Javascript onApril 23, 2014

 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回,所以我想知道是否有一种方式,使我可以使用单个回调,并行地加载它们,就像JS加载器 curljs 所做的那样。 很幸运! 通过jQuery.when, 我可以并发地加载两个请求,只执行一次回调!

jQuery 脚本
正如我提到的,下面是加载脚本和一个JSON资源的用例:

$.when(
 $.getScript('/media/js/wiki-min.js?build=21eb633'), 
 $.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/')
).then(function(a, b) {  // 或者也可以使用 ".done"
 // Yay, 加载完成,此处我们可以执行一些依赖操作。。。
});

当资源加载完成, 指定的 done 或者 then 回调会触发,因此可以知道请求已经完成。 每个请求返回的回调参数对象类型不同,因此上述请求可能返回如下信息:

// 格式: [response, state, jqxhr], [response, state, jqxhr]
["(function(c){var e=c(".from-search-navigate");if(e…;if(j){g.apply(m,l)}}}})(window,document,jQuery);", "success", Object]
[Array[15], "success", Object]

如果还需要增加一个传统的AJAX XHR请求,比如说一个小部件模板,我们可以这样做:

$.when(
 $.getScript('/media/js/wiki-min.js?build=21eb633'), 
 $.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/'), 
 $.get('/')
).then(function(a, b, c) { 
 console.log(a, b, c); 
});

Dojo Toolkit很早就有此类功能了,但jQuery也可以这么做我还是相当振奋的。 对于现在的开发,多个不同步且返回先后顺序也不确定的请求共享同一个回调是很自然的需求,所以jQuery绝对是与时俱进的!

Javascript 相关文章推荐
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
iframe实用操作锦集
Apr 22 #Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 #Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 #Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 #Javascript
Area 区域实现post提交数据的js写法
Apr 22 #Javascript
div失去焦点事件实现思路
Apr 22 #Javascript
js隐式全局变量造成的bug示例代码
Apr 22 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python实现多属性排序的方法
2018/12/05 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
django使用JWT保存用户登录信息
2020/04/22 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
护林员个人总结
2015/03/04 职场文书
学习雷锋主题班会
2015/08/14 职场文书
企业法人任命书
2015/09/21 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Python学习之时间包使用教程详解
2022/03/21 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python