针对多个Ajax调用的jQuery回调

Question

针对多个Ajax调用的jQuery回调

我想在一个点击事件中进行三个Ajax调用。每个Ajax调用都执行不同的操作，并返回最终回调所需的数据。调用本身并不依赖于彼此，它们可以同时进行，但是我希望在这三个调用完成后进行最后的回调。

$('#button').click(function() {
    fun1();
    fun2();
    fun3();//now do something else when the requests have done their 'success' callbacks.});var fun1= (function() {
    $.ajax({/*code*/});});var fun2 = (function() {
    $.ajax({/*code*/});});var fun3 = (function() {
    $.ajax({/*code*/});});

Answer 1

下面是我编写的一个回调对象，您可以在其中设置一个回调，一旦全部完成，或者让每个回调都有自己的回调，并在所有回调完成后都启动它们：通知由于jQuery1.5+可以使用另一个答案中描述的延迟方法：&nbsp;&nbsp;$.when($.ajax(),&nbsp;[...]).then(function(results){},[...]);这里延迟的例子对于jQuery<1.5，以下内容可以工作，或者如果您需要在未知的时间启动Ajax调用，如下面两个按钮所示：点击两个按钮后启动[使用]为单株回调完成后：工作实例//&nbsp;initialize&nbsp;herevar&nbsp;requestCallback&nbsp;=&nbsp;new&nbsp;MyRequestsCompleted({ &nbsp;&nbsp;&nbsp;&nbsp;numRequest:&nbsp;3, &nbsp;&nbsp;&nbsp;&nbsp;singleCallback:&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;"I'm&nbsp;the&nbsp;callback"); &nbsp;&nbsp;&nbsp;&nbsp;}});//usage&nbsp;in&nbsp;request$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.requestComplete(true); &nbsp;&nbsp;&nbsp;&nbsp;}});$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.requestComplete(true); &nbsp;&nbsp;&nbsp;&nbsp;}});$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.requestComplete(true); &nbsp;&nbsp;&nbsp;&nbsp;}});各有他们自己当全部完成时回调：工作实例//initialize&nbsp;var&nbsp;requestCallback&nbsp;=&nbsp;new&nbsp;MyRequestsCompleted({ &nbsp;&nbsp;&nbsp;&nbsp;numRequest:&nbsp;3});//usage&nbsp;in&nbsp;request$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.addCallbackToQueue(true,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Im&nbsp;the&nbsp;first&nbsp;callback'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}});$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.addCallbackToQueue(true,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Im&nbsp;the&nbsp;second&nbsp;callback'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}});$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/echo/html/', &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallback.addCallbackToQueue(true,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Im&nbsp;the&nbsp;third&nbsp;callback'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}});[守则]var&nbsp;MyRequestsCompleted&nbsp;=&nbsp;(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;numRequestToComplete,&nbsp;requestsCompleted,&nbsp;callBacks,&nbsp;singleCallBack; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function(options)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!options)&nbsp;options&nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;numRequestToComplete&nbsp;=&nbsp;options.numRequest&nbsp;||&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestsCompleted&nbsp;=&nbsp;options.requestsCompleted&nbsp;||&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callBacks&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fireCallbacks&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("we're&nbsp;all&nbsp;complete"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;callBacks.length;&nbsp;i++)&nbsp;callBacks[i](); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(options.singleCallback)&nbsp;callBacks.push(options.singleCallback); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.addCallbackToQueue&nbsp;=&nbsp;function(isComplete,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isComplete)&nbsp;requestsCompleted++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(callback)&nbsp;callBacks.push(callback); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(requestsCompleted&nbsp;==&nbsp;numRequestToComplete)&nbsp;fireCallbacks(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.requestComplete&nbsp;=&nbsp;function(isComplete)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isComplete)&nbsp;requestsCompleted++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(requestsCompleted&nbsp;==&nbsp;numRequestToComplete)&nbsp;fireCallbacks(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setCallback&nbsp;=&nbsp;function(callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callBacks.push(callBack); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;};})();

Answer 2

看起来您已经找到了一些解决这个问题的方法，但是我认为这里有一些值得提及的东西，它将极大地简化您的代码。jQuery引入了$.when在1.5节。看起来：$.when($.ajax(...),&nbsp;$.ajax(...)).then(function&nbsp;(resp1,&nbsp;resp2)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//this&nbsp;callback&nbsp;will&nbsp;be&nbsp;fired&nbsp;once&nbsp;all&nbsp;ajax&nbsp;calls&nbsp;have&nbsp;finished.});我没看到这里提到过，希望能有所帮助。

Answer 3

我自己也看不出需要什么东西。Simple有一个变量，它是一个整数。启动请求时，增加该数字。当一个人完成的时候，减少它。当它为零时，没有正在进行的请求，所以您完成了。$('#button').click(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;inProgress&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;handleBefore()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inProgress++; &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;handleComplete()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!--inProgress)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;what's&nbsp;in&nbsp;here&nbsp;when&nbsp;all&nbsp;requests&nbsp;have&nbsp;completed. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSend:&nbsp;handleBefore, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleComplete(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSend:&nbsp;handleBefore, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleComplete(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSend:&nbsp;handleBefore, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleComplete(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;whatever &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});});