使用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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
JS实现可视化文件上传
Sep 08 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
学生信息管理系统python版
2018/10/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
销售自我评价
2013/10/22 职场文书
打架检讨书800字
2014/01/10 职场文书
商业房地产广告语
2014/03/13 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
教师节随笔
2015/08/15 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
golang的文件创建及读写操作
2022/04/14 Golang