猿问

使用jQuery的并行异步Ajax请求

使用jQuery的并行异步Ajax请求

我想根据多个ajax / json请求的结果更新页面。使用jQuery,我可以“链接”回调,就像这个非常简单的剥离示例:

$.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);
  });});

但是,这导致请求是连续的。我更倾向于一种并行发出请求的方法,并在完成后执行页面更新。有没有办法做到这一点?


Cats萌萌
浏览 683回答 3
3回答

Smart猫小萌

试试这个解决方案,它可以支持任何特定数量的并行查询:var done = 4; // number of total requestsvar 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);   });});

心有法竹

jQuery $ .when()和$ .done()正是您所需要的:$.when($.ajax("/page1.php"), $.ajax("/page2.php"))   .then(myFunc, myFailure);

梵蒂冈之花

根据Yair Leviel给出的答案,这个答案已经过时了。使用promise库,如jQuery.when()或Q.js.我创建了一个通用解决方案作为jQuery扩展。可以使用一些微调使其更通用,但它符合我的需要。截至撰写本文时,此技术优于其他技术的优势在于可以使用任何类型的带回调的异步处理。注意:我会使用JavaScript的Rx扩展而不是这个,如果我认为我的客户端可以依赖于另一个第三方库:)//&nbsp;jQuery&nbsp;extension&nbsp;for&nbsp;running&nbsp;multiple&nbsp;async&nbsp;methods&nbsp;in&nbsp;parallel//&nbsp;and&nbsp;getting&nbsp;a&nbsp;callback&nbsp;with&nbsp;all&nbsp;results&nbsp;when&nbsp;all&nbsp;of&nbsp;them&nbsp;have&nbsp;completed.////&nbsp;Each&nbsp;worker&nbsp;is&nbsp;a&nbsp;function&nbsp;that&nbsp;takes&nbsp;a&nbsp;callback&nbsp;as&nbsp;its&nbsp;only&nbsp;argument,&nbsp;and//&nbsp;fires&nbsp;up&nbsp;an&nbsp;async&nbsp;process&nbsp;that&nbsp;calls&nbsp;this&nbsp;callback&nbsp;with&nbsp;its&nbsp;result.////&nbsp;Example://&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.parallel(//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(callback)&nbsp;{&nbsp;$.get("form.htm",&nbsp;{},&nbsp;callback,&nbsp;"html");&nbsp;},//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(callback)&nbsp;{&nbsp;$.post("data.aspx",&nbsp;{},&nbsp;callback,&nbsp;"json");&nbsp;},//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(formHtml,&nbsp;dataJson)&nbsp;{&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Handle&nbsp;success;&nbsp;each&nbsp;argument&nbsp;to&nbsp;this&nbsp;function&nbsp;is&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;result&nbsp;of&nbsp;correlating&nbsp;ajax&nbsp;call&nbsp;above.//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);(function&nbsp;($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.parallel&nbsp;=&nbsp;function&nbsp;(anyNumberOfWorkers,&nbsp;allDoneCallback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;workers&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;workersCompleteCallback&nbsp;=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;To&nbsp;support&nbsp;any&nbsp;number&nbsp;of&nbsp;workers,&nbsp;use&nbsp;"arguments"&nbsp;variable&nbsp;to &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;access&nbsp;function&nbsp;arguments&nbsp;rather&nbsp;than&nbsp;the&nbsp;names&nbsp;above. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;lastArgIndex&nbsp;=&nbsp;arguments.length&nbsp;-&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;$.each(arguments,&nbsp;function&nbsp;(index)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(index&nbsp;==&nbsp;lastArgIndex)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;workersCompleteCallback&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;workers.push({&nbsp;fn:&nbsp;this,&nbsp;done:&nbsp;false,&nbsp;result:&nbsp;null&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Short&nbsp;circuit&nbsp;this&nbsp;edge&nbsp;case &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(workers.length&nbsp;==&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;workersCompleteCallback(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Fire&nbsp;off&nbsp;each&nbsp;worker&nbsp;process,&nbsp;asking&nbsp;it&nbsp;to&nbsp;report&nbsp;back&nbsp;to&nbsp;onWorkerDone. &nbsp;&nbsp;&nbsp;&nbsp;$.each(workers,&nbsp;function&nbsp;(workerIndex)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;worker&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;callback&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;onWorkerDone(worker,&nbsp;arguments);&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.fn(callback); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Store&nbsp;results&nbsp;and&nbsp;update&nbsp;status&nbsp;as&nbsp;each&nbsp;item&nbsp;completes. &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;The&nbsp;[0]&nbsp;on&nbsp;workerResultS&nbsp;below&nbsp;assumes&nbsp;the&nbsp;client&nbsp;only&nbsp;needs&nbsp;the&nbsp;first&nbsp;parameter &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;passed&nbsp;into&nbsp;the&nbsp;return&nbsp;callback.&nbsp;This&nbsp;simplifies&nbsp;the&nbsp;handling&nbsp;in&nbsp;allDoneCallback, &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;but&nbsp;may&nbsp;need&nbsp;to&nbsp;be&nbsp;removed&nbsp;if&nbsp;you&nbsp;need&nbsp;access&nbsp;to&nbsp;all&nbsp;parameters&nbsp;of&nbsp;the&nbsp;result. &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;For&nbsp;example,&nbsp;$.post&nbsp;calls&nbsp;back&nbsp;with&nbsp;success(data,&nbsp;textStatus,&nbsp;XMLHttpRequest).&nbsp;&nbsp;If &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;you&nbsp;need&nbsp;textStatus&nbsp;or&nbsp;XMLHttpRequest&nbsp;then&nbsp;pull&nbsp;off&nbsp;the&nbsp;[0]&nbsp;below. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;onWorkerDone(worker,&nbsp;workerResult)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.done&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.result&nbsp;=&nbsp;workerResult[0];&nbsp;//&nbsp;this&nbsp;is&nbsp;the&nbsp;[0]&nbsp;ref'd&nbsp;above. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;allResults&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;workers.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!workers[i].done)&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;allResults.push(workers[i].result); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;workersCompleteCallback.apply(this,&nbsp;allResults); &nbsp;&nbsp;&nbsp;&nbsp;}};})(jQuery);
随时随地看视频慕课网APP
我要回答