使用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写的一个TableView控件代码
Jan 23 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
Angularjs过滤器使用详解
May 25 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
基于JavaScript实现随机点名器
Feb 25 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
php 生成短网址原理及代码
2014/01/23 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue2中filter()的实现代码
2017/07/09 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
临床护士自荐信
2014/01/31 职场文书
仓库主管岗位职责
2014/03/02 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书