使用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 相关文章推荐
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
js星星评分效果
Jul 24 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
vue-列表下详情的展开与折叠案例
Jul 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
解决GD中文乱码问题
2007/02/14 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python计算回文数的方法
2015/03/11 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
WxPython实现无边框界面
2019/11/18 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python如何建立全零数组
2020/07/19 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
公司的门卫岗位职责
2014/09/09 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
ipad隐藏软件app图标方法
2022/04/19 数码科技
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
APP界面设计技巧和注意事项
2022/04/29 杂记