使用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中出现乱码的处理心得
Dec 24 Javascript
清空上传控件input file的值
Jul 03 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
javascript string字符串优化问题
Jul 31 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
js 操作符汇总
Nov 08 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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
如何隐藏你的.php文件
2007/01/04 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
店长岗位的工作内容
2013/11/12 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
教书育人演讲稿
2014/09/11 职场文书
给老师的感谢信
2015/01/20 职场文书
英语教师个人工作总结
2015/02/09 职场文书
感恩的心主题班会
2015/08/12 职场文书
四则混合运算教学反思
2016/02/23 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript