使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

我知道这些函数都是异步执行(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绝对是与时俱进的!

赞 (0)

相关推荐

  • jQuery回调函数的定义及用法实例

    本文实例讲述了jQuery回调函数的定义及用法.分享给大家供大家参考.具体分析如下: jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍. 代码实例如下: 利用回调函数,当div全部隐藏之后弹出一个提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

  • jQuery Ajax Post 回调函数不执行问题的解决方法

    今天在写一个检查用户名的功能时,使用的是jQuery.post( url, [data], [callback], [type] )这个函数,但是发现其中的回调函数不能执行. 先来看看我的代码: 前台代码: <script type="text/javascript"> function checkUser() { var user = $('#<%=txtUser.ClientID %>').val(); $.post('checkUser.ashx', {

  • jQuery AJAX回调函数this指向问题

    如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window.为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是call和apply,当然也有利用闭包来实现的方法.本文通过一个例子来说明这些问题. 先看一段演示代码,这代码只供演示用,没有实际意义. 复制代码 代码如下: //一个没有实际意义的socket连接对象 var socket = { connect: function(host, port) { alert('Co

  • jquery Deferred 快速解决异步回调的问题

    jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise(); } $.when(ok(1),ok(2)).then(function(resp1,resp2){}) //相关API 分成3类 1类:$.when(pro1,pro1) 将多个 promise 对象以a

  • jQuery插件扩展实例【添加回调函数】

    本文实例讲述了jQuery插件扩展的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript"> function doSomething(callback) { // - // Call the callback callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量 } function fo

  • jQuery的load()方法及其回调函数用法实例

    本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun

  • 浅谈jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 复制代码 代码如下: $("p").hide(1000); alert("the paragraph is now hidden"); <!--未使用回调函数,段落未完全隐藏时就弹出信息--> $("p").hide(1000,function(){alert("the paragraph is now

  • jQuery回调方法使用示例

    本文实例讲述了jQuery回调方法使用.分享给大家供大家参考,具体如下: 方法参数带有function方法,并且执行完后把计算的数据返回 function a1(p){ // p 为调用此方法传递的object对象 var callback = p?p.callback:null; // 获取参数对象中的回调方法 if($.isFunction(p.callback)){ // 如果有回调方法 callback("123"); // 返回一个计算后的数据,方便回调方法使用它 } } f

  • jquery序列化表单以及回调函数的使用示例

    在开发项目中,将前台的值传给后台,有时的JSP表单中的值有一两个,也有全部的值,如果这时一个个传,必定不是很好的办法,所以使用jQuery提供的表单序列化方法,可以很好的解决这个问题,同时可以封装成通用的函数,执行成功可以调用各自的回调函数,实现各自的功能. 代码如下: function queryUserInfo(actionUrl,formId,fun){ var params=new Object(); //声明数组 $.each($("#"+formId).serializeA

  • 从零学jquery之如何使用回调函数

    在类C语言中通常通过函数指针/引用的方式传递. jquery也提供类似的回调函数机制.但是如何正确传递回调函数仍然值得一提.  1.不带参数的回调 复制代码 代码如下: $.get('myhtmlpage.html', myCallBack); 其中myCallBack是函数名字.函数是javascript的基础.可以当作引用变量一样传递. 2.带参数的回调 很自然的,按照以往的经验,我们会认为带参数的回调是下面的样子: 复制代码 代码如下: $.get('myhtmlpage.html', m

随机推荐