使用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学习笔记7 原型链的原理
Jan 11 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
vue中render函数的使用详解
Oct 12 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
Vue2.0搭建脚手架
Mar 13 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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
Vue动态获取width的方法
2018/08/22 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python字典操作实例详解
2017/11/16 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
python如何修改文件时间属性
2021/02/05 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
好学生评语大全
2014/05/05 职场文书
应聘教师求职信
2014/07/19 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年暑假生活总结
2015/07/13 职场文书
四则混合运算教学反思
2016/02/23 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js