blocks|key|1517218|text|如果一个请求的结果依赖于另一个请求，则不能使它们并行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1517219|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If the result of one request depends on the other, you can't make them parallel.

blocks|key|1302321|text|尝试这个解决方案，它可以支持任何特定数量的并行查询：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1302322|var+done+=+4;+//+number+of+total+requests
var+sum+=+0;

/*+Normal+loops+don't+create+a+new+scope+*/
$([1,2,3,4,5]).each(function()+{
++var+number+=+this;
++$.getJSON("/values/"+%2B+number,+function(data)+{
++++sum+%2B=+data.value;
++++done+-=+1;
++++if(done+==+0)+$("#mynode").html(sum);
++});
});|code-block|syntax|javascript|1302323|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this solution, which can support any specific number of parallel queries:

<pre><code>var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
 var number = this;
 $.getJSON("/values/" + number, function(data) {
 sum += data.value;
 done -= 1;
 if(done == 0) $("#mynode").html(sum);
 });
});
</code></pre>

blocks|key|1302335|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1302336|var+allData+=+[]
$.getJSON("/values/1",+function(data)+{
++++allData.push(data);
++++if(data.length+==+2){
++++++processData(allData)+//+where+process+data+processes+all+the+data
++++}
});

$.getJSON("/values/2",+function(data)+{
++++allData.push(data);
++++if(data.length+==+2){
++++++++processData(allData)+//+where+process+data+processes+all+the+data
++++}
});

var+processData+=+function(data){
+++++var+sum+=+data[0]+%2B+data[1]
+++++$('#mynode').html(sum);
}|code-block|syntax|javascript|1302337|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you could do something like this

<pre><code>var allData = []
$.getJSON("/values/1", function(data) {
 allData.push(data);
 if(data.length == 2){
 processData(allData) // where process data processes all the data
 }
});

$.getJSON("/values/2", function(data) {
 allData.push(data);
 if(data.length == 2){
 processData(allData) // where process data processes all the data
 }
});

var processData = function(data){
 var sum = data[0] + data[1]
 $('#mynode').html(sum);
}
</code></pre>

blocks|key|1517337|text|以下是我直接回答您的问题的尝试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1517338|基本上，您只需构建并执行AJAX调用堆栈，然后在所有事件完成时调用所提供的函数-所提供的参数是来自所有所提供的ajax请求的结果的数组。|1517339|显然，这是早期的代码-您可以在灵活性方面对此进行更详细的说明。|1517340|<script+type="text/javascript"+src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script+type="text/javascript">

var+ParallelAjaxExecuter+=+function(+onComplete+)
{
++this.requests+=+[];
++this.results+=+[];
++this.onComplete+=+onComplete;+
}

ParallelAjaxExecuter.prototype.addRequest+=+function(+method,+url,+data,+format+)
{
++this.requests.push(+{
++++++"method"++++:+method
++++,+"url"+++++++:+url
++++,+"data"++++++:+data
++++,+"format"++++:+format
++++,+"completed"+:+false
++}+)
}

ParallelAjaxExecuter.prototype.dispatchAll+=+function()
{
++var+self+=+this;
++$.each(+self.requests,+function(+i,+request+)
++++{
++++request.method(+request.url,+request.data,+function(+r+)
++++{
++++++return+function(+data+)
++++++{
++++++++console.log
++++++++r.completed+=+true;
++++++++self.results.push(+data+);
++++++++self.checkAndComplete();
++++++}
++++}(+request+)+)
++}+)
}

ParallelAjaxExecuter.prototype.allRequestsCompleted+=+function()
{
++var+i+=+0;
++while+(+request+=+this.requests[i%2B%2B]+)
++{
++++if+(+request.completed+===+false+)
++++{
++++++return+false;
++++}
++}
++return+true;
},

ParallelAjaxExecuter.prototype.checkAndComplete+=+function()
{
++if+(+this.allRequestsCompleted()+)
++{
++++this.onComplete(+this.results+);
++}
}

var+pe+=+new+ParallelAjaxExecuter(+function(+results+)
{
++alert(+eval(+results.join(+'%2B'+)+)+);
}+);

pe.addRequest(+$.get,+'test.php',+{n:1},+'text'+);
pe.addRequest(+$.get,+'test.php',+{n:2},+'text'+);
pe.addRequest(+$.get,+'test.php',+{n:3},+'text'+);
pe.addRequest(+$.get,+'test.php',+{n:4},+'text'+);

pe.dispatchAll();

</script>|code-block|syntax|javascript|1517341|这是test.php|1517342|<?php

echo+pow(+$_GET['n'],+2+);

?>|1517343|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Here's my attempt at directly addressing your question

Basically, you just build up and AJAX call stack, execute them all, and a provided function is called upon completion of all the events - the provided argument being an array of the results from all the supplied ajax requests.

Clearly this is early code - you could get more elaborate with this in terms of the flexibility.

<pre><code>&lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

var ParallelAjaxExecuter = function( onComplete )
{
 this.requests = [];
 this.results = [];
 this.onComplete = onComplete; 
}

ParallelAjaxExecuter.prototype.addRequest = function( method, url, data, format )
{
 this.requests.push( {
 "method" : method
 , "url" : url
 , "data" : data
 , "format" : format
 , "completed" : false
 } )
}

ParallelAjaxExecuter.prototype.dispatchAll = function()
{
 var self = this;
 $.each( self.requests, function( i, request )
 {
 request.method( request.url, request.data, function( r )
 {
 return function( data )
 {
 console.log
 r.completed = true;
 self.results.push( data );
 self.checkAndComplete();
 }
 }( request ) )
 } )
}

ParallelAjaxExecuter.prototype.allRequestsCompleted = function()
{
 var i = 0;
 while ( request = this.requests[i++] )
 {
 if ( request.completed === false )
 {
 return false;
 }
 }
 return true;
},

ParallelAjaxExecuter.prototype.checkAndComplete = function()
{
 if ( this.allRequestsCompleted() )
 {
 this.onComplete( this.results );
 }
}

var pe = new ParallelAjaxExecuter( function( results )
{
 alert( eval( results.join( '+' ) ) );
} );

pe.addRequest( $.get, 'test.php', {n:1}, 'text' );
pe.addRequest( $.get, 'test.php', {n:2}, 'text' );
pe.addRequest( $.get, 'test.php', {n:3}, 'text' );
pe.addRequest( $.get, 'test.php', {n:4}, 'text' );

pe.dispatchAll();

&lt;/script&gt;
</code></pre>

here's test.php

<pre><code>&lt;?php

echo pow( $_GET['n'], 2 );

?&gt;
</code></pre>

blocks|key|1302440|text|jQuery+$.when()和$.done()正是您所需要的：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1302441|$.when($.ajax("/page1.php"),+$.ajax("/page2.php"))
++.then(myFunc,+myFailure);|code-block|syntax|javascript|1302442|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.when/|1|http://api.jquery.com/deferred.done/^0|7|8|0|G|8|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

jQuery <a href="http://api.jquery.com/jQuery.when/">$.when()</a> and <a href="http://api.jquery.com/deferred.done/">$.done()</a> are exactly what you need:

<pre><code>$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
 .then(myFunc, myFailure);
</code></pre>

blocks|key|1517417|text|下面是一个使用mbostock/queue的实现|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1517418|queue()
++.defer(function(callback)+{
++++$.post('/echo/json/',+{json:+JSON.stringify({value:+1}),+delay:+1},+function(data)+{
++++++callback(null,+data.value);
++++});
++})
++.defer(function(callback)+{
++++$.post('/echo/json/',+{json:+JSON.stringify({value:+3}),+delay:+2},+function(data)+{
++++++callback(null,+data.value);
++++});
++})
++.awaitAll(function(err,+results)+{
++++var+result+=+results.reduce(function(acc,+value)+{
++++++return+acc+%2B+value;
++++},+0);
++++console.log(result);
++});|code-block|syntax|javascript|1517419|相关的小提琴：http://jsfiddle.net/MdbW2/|1517420|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mbostock/queue|1|http://jsfiddle.net/MdbW2/^0|7|E|0|0|0|7|Q|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Here's an implementation using <a href="https://github.com/mbostock/queue" rel="nofollow">mbostock/queue</a>:

<pre><code>queue()
 .defer(function(callback) {
 $.post('/echo/json/', {json: JSON.stringify({value: 1}), delay: 1}, function(data) {
 callback(null, data.value);
 });
 })
 .defer(function(callback) {
 $.post('/echo/json/', {json: JSON.stringify({value: 3}), delay: 2}, function(data) {
 callback(null, data.value);
 });
 })
 .awaitAll(function(err, results) {
 var result = results.reduce(function(acc, value) {
 return acc + value;
 }, 0);
 console.log(result);
 });
</code></pre>

The associated fiddle: <a href="http://jsfiddle.net/MdbW2/" rel="nofollow">http://jsfiddle.net/MdbW2/</a>

blocks|key|1302534|text|使用以下JQuery扩展(可以将其编写为独立函数)，您可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1302535|$.whenAll({
++++val1:+$.getJSON('/values/1'),
++++val2:+$.getJSON('/values/2')
})
++++.done(function+(results)+{
++++++++var+sum+=+results.val1.value+%2B+results.val2.value;

++++++++$('#mynode').html(sum);
++++});|code-block|syntax|javascript|1302536|JQuery+(1.x)扩展whenAll()：|1302537|$.whenAll+=+function+(deferreds)+{
++++function+isPromise(fn)+{
++++++++return+fn+&&+typeof+fn.then+===+'function'+&&
++++++++++++String($.Deferred().then)+===+String(fn.then);
++++}
++++var+d+=+$.Deferred(),
++++++++keys+=+Object.keys(deferreds),
++++++++args+=+keys.map(function+(k)+{
++++++++++++return+$.Deferred(function+(d)+{
++++++++++++++++var+fn+=+deferreds[k];

++++++++++++++++(isPromise(fn)+?+fn+:+$.Deferred(fn))
++++++++++++++++++++.done(d.resolve)
++++++++++++++++++++.fail(function+(err)+{+d.reject(err,+k);+})
++++++++++++++++;
++++++++++++});
++++++++});

++++$.when.apply(this,+args)
++++++++.done(function+()+{
++++++++++++var+resObj+=+{},
++++++++++++++++resArgs+=+Array.prototype.slice.call(arguments);
++++++++++++resArgs.forEach(function+(v,+i)+{+resObj[keys[i]]+=+v;+});
++++++++++++d.resolve(resObj);
++++++++})
++++++++.fail(d.reject);

++++return+d;
};|1302538|参见jsbin示例：http://jsbin.com/nuxuciwabu/edit?js,console|offset|length|1302539|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/nuxuciwabu/edit?js,console^0|0|0|0|0|A|17|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

With the following extension of JQuery (to can be written as a standalone function you can do this:

<pre class="lang-js prettyprint-override"><code>$.whenAll({
 val1: $.getJSON('/values/1'),
 val2: $.getJSON('/values/2')
})
 .done(function (results) {
 var sum = results.val1.value + results.val2.value;

 $('#mynode').html(sum);
 });
</code></pre>

The JQuery (1.x) extension whenAll():

<pre><code>$.whenAll = function (deferreds) {
 function isPromise(fn) {
 return fn &amp;&amp; typeof fn.then === 'function' &amp;&amp;
 String($.Deferred().then) === String(fn.then);
 }
 var d = $.Deferred(),
 keys = Object.keys(deferreds),
 args = keys.map(function (k) {
 return $.Deferred(function (d) {
 var fn = deferreds[k];

 (isPromise(fn) ? fn : $.Deferred(fn))
 .done(d.resolve)
 .fail(function (err) { d.reject(err, k); })
 ;
 });
 });

 $.when.apply(this, args)
 .done(function () {
 var resObj = {},
 resArgs = Array.prototype.slice.call(arguments);
 resArgs.forEach(function (v, i) { resObj[keys[i]] = v; });
 d.resolve(resObj);
 })
 .fail(d.reject);

 return d;
};
</code></pre>

See jsbin example:
<a href="http://jsbin.com/nuxuciwabu/edit?js,console" rel="nofollow">http://jsbin.com/nuxuciwabu/edit?js,console</a>

blocks|key|1517525|text|对我来说，最专业的解决方案是像这样使用async.js和Array.reduce：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1517526|++++++++async.map([1,+2,+3,+4,+5],+function+(number,+callback)+{
++++++++++++$.getJSON("/values/"+%2B+number,+function+(data)+{
++++++++++++++++callback(null,+data.value);
++++++++++++});
++++++++},+function+(err,+results)+{
++++++++++++$("#mynode").html(results.reduce(function(previousValue,+currentValue)+{
++++++++++++++++return+previousValue+%2B+currentValue;
++++++++++++}));
++++++++});|code-block|syntax|javascript|1517527|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/caolan/async^0|J|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The most professional solution for me would be by using <a href="https://github.com/caolan/async" rel="nofollow">async.js</a> and Array.reduce like so:

<pre><code> async.map([1, 2, 3, 4, 5], function (number, callback) {
 $.getJSON("/values/" + number, function (data) {
 callback(null, data.value);
 });
 }, function (err, results) {
 $("#mynode").html(results.reduce(function(previousValue, currentValue) {
 return previousValue + currentValue;
 }));
 });
</code></pre>

blocks|key|1517562|text|以Yair的回答为基础。您可以动态定义ajax承诺。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1517563|var+start+=+1;+//+starting+value
var+len+=+2;+//+no.+of+requests

var+promises+=+(new+Array(len)).fill().map(function()+{
++++return+$.ajax("/values/"+%2B+i%2B%2B);
});

$.when.apply($,+promises)
++.then(myFunc,+myFailure);|code-block|syntax|javascript|1517564|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Building on Yair's answer. 
You can define the ajax promises dynamically. 

<pre><code>var start = 1; // starting value
var len = 2; // no. of requests

var promises = (new Array(len)).fill().map(function() {
 return $.ajax("/values/" + i++);
});

$.when.apply($, promises)
 .then(myFunc, myFailure);
</code></pre>

blocks|key|1517602|text|假设您有一个文件名数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1517603|var+templateNameArray=["test.html","test2.html","test3.html"];

htmlTemplatesLoadStateMap={};
var+deffereds=[];
++for+(var+i+=+0;+i+<+templateNameArray.length;+i%2B%2B)
+++++++{
++++++++if+(!htmlTemplatesLoadStateMap[templateNameArray[i]])+
++++++++++++{+++++++++
++++++++++++++deferreds.push($.get("./Content/templates/"+%2BtemplateNameArray[i],+

++++++++++++++++++function+(response,+status,+xhr)+{
++++++++++++++++++++++if+(status+==+"error")+{+}+
++++++++++++++++++++++++else+{
++++++++++++++++++++++++++++++++$("body").append(response);
+++++++++++++++++++++++++++++++}
+++++++++++++++++++++++++}));+++++++++++++
htmlTemplatesLoadStateMap[templateNameArray[i]]+=+true;
+++++++++++++++++++++++}
++++++++++++++++++}
++++++++++++++++++++++++++++++++++++++$.when.all(deferreds).always(function(resultsArray)+{+++yourfunctionTobeExecuted(yourPayload);
++++++++++++++++++++++++++++++++});|code-block|syntax|javascript|1517604|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Suppose you have an array of file name.

<pre><code>var templateNameArray=["test.html","test2.html","test3.html"];

htmlTemplatesLoadStateMap={};
var deffereds=[];
 for (var i = 0; i &lt; templateNameArray.length; i++)
 {
 if (!htmlTemplatesLoadStateMap[templateNameArray[i]]) 
 { 
 deferreds.push($.get("./Content/templates/" +templateNameArray[i], 

 function (response, status, xhr) {
 if (status == "error") { } 
 else {
 $("body").append(response);
 }
 })); 
htmlTemplatesLoadStateMap[templateNameArray[i]] = true;
 }
 }
 $.when.all(deferreds).always(function(resultsArray) { yourfunctionTobeExecuted(yourPayload);
 });
</code></pre>

I'd like to update a page based upon the results of multiple ajax/json requests. Using jQuery, I can "chain" the callbacks, like this very simple stripped down example:

<pre><code>$.getJSON("/values/1", function(data) {
 // data = {value: 1}
 var value_1 = data.value;

 $.getJSON("/values/2", function(data) {
 // data = {value: 42}
 var value_2 = data.value;

 var sum = value_1 + value_2;

 $('#mynode').html(sum);
 });

});
</code></pre>

However, this results in the requests being made serially. I'd much rather a way to make the requests in parallel, and perform the page update after all are complete. Is there any way to do this?

Parallel asynchronous Ajax requests using jQuery

jQuery

JSON

我想根据多个ajax/json请求的结果更新一个页面。使用jQuery，我可以“链接”回调，就像这个非常简单的简化示例：$.getJSON("/values/1", function(data) {  // data = {value: 1}  var value_1 = data.value;  $.getJSON(...

问使用jQuery的并行异步Ajax请求
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的并行异步Ajax请求EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的并行异步Ajax请求
EN