使用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 相关文章推荐
动态加载JS文件的三种方法
Nov 08 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
通过html表格发电子邮件
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python实现关键词提取的示例讲解
2018/04/28 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
python制作抽奖程序代码详解
2021/01/15 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
邮政竞聘演讲稿
2014/09/03 职场文书
班主任工作总结范文
2015/08/13 职场文书
导游词之山海关
2019/12/10 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
Redis 限流器
2022/05/15 Redis