使用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处理VBArray的函数使用说明
May 11 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
绿色环保标语
2014/06/12 职场文书
代领毕业证委托书
2014/08/02 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
小学教育见习总结
2015/06/23 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android