使用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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
js传值 判断
2006/10/26 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python简单实现刷新智联简历
2016/03/30 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
详解Python多线程下的list
2020/07/03 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015年检验科工作总结
2015/04/27 职场文书
Redis实现一个账号只能登录一个设备
2022/04/19 Redis