使用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 浏览本地文件夹系统示例代码
Oct 24 Javascript
javascript打印输出json实例
Nov 11 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
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
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
浅谈js中的闭包
2015/03/16 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Angular.JS中的this指向详解
2017/05/17 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
教师节活动总结
2014/08/29 职场文书
幼师辞职信范文
2015/02/27 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
师范生见习总结范文
2015/06/23 职场文书
订货会主持词
2015/07/01 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电