使用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 学习技巧总结
May 21 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
浅谈vue的第一个commit分析
Jun 08 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP动态变静态原理
2006/11/25 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
详解Python中的文本处理
2015/04/11 Python
python通过文件头判断文件类型
2015/10/30 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
有关打架的检讨书
2014/01/25 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
工程安全员岗位职责
2014/03/09 职场文书
公司经理聘任书
2014/03/29 职场文书
学术诚信承诺书
2014/05/26 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电