使用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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
javascript优先加载笔记代码
Sep 30 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
在Vue中使用mockjs代码实例
Nov 25 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
apache mysql php 源码编译使用方法
2012/05/03 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python函数中定义参数的四种方式
2014/11/30 Python
Python pickle模块用法实例
2015/04/14 Python
Python实现批量修改文件名实例
2015/07/08 Python
python ddt实现数据驱动
2018/03/14 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
仓库管理制度
2014/01/21 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
导师鉴定意见
2015/06/05 职场文书
青春雷锋观后感
2015/06/10 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis