JavaScript回调多个Ajax调用 [英] Javascript callback for multiple ajax calls
问题描述
我想在点击事件3 Ajax调用。每个Ajax调用做了不同的工作并返回所需要的最终回调数据。该调用本身并不依赖于彼此，他们都可以去在同一时间，不过，我想有一个最终的回调时，所有三个都完成了。
$（'＃键）。点击（函数（）{
FUN1（）;
FUN2（）;
FUN3（）;
//现在做别的事情的时候要求做他们的'成功'回调。
}）;
VAR FUN1 =（函数（）{
$阿贾克斯（{/ * code * /}）;
}）;
VAR FUN2 =（函数（）{
$阿贾克斯（{/ * code * /}）;
}）;
VAR FUN3 =（函数（）{
$阿贾克斯（{/ * code * /}）;
}）;
下面是我写的一个回调对象，你可以设置一个回调火一旦全部完成或让每个人都有自己的回调并触发它们一旦所有完成：
的通知的
由于jQuery的作为另一种答案描述1.5+可以使用递延法：
$。当（$阿贾克斯（），[...]），那么（函数（结果）{}，[...]）。
有关jQuery和LT; 1.5下面的工作，或者如果你需要让你的射向未知时间ajax调用如下所示有两个按钮：这两个按钮后解雇被点击
[用法]
对于单回调完成之后： 工作实例
//初始化这里
VAR requestCallback =新MyRequestsCompleted（{
numRequest：3，
singleCallback：函数（）{
警报（我的回调）;
}
}）;
//使用在要求
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.requestComplete（真正的）;
}
}）;
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.requestComplete（真正的）;
}
}）;
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.requestComplete（真正的）;
}
}）;
各有自己回调，当所有完成： 工作示例
//初始化
VAR requestCallback =新MyRequestsCompleted（{
numRequest：3
}）;
//使用在要求
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.addCallbackToQueue（真，函数（）{
警报（'聊天室的第一个回调）;
}）;
}
}）;
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.addCallbackToQueue（真，函数（）{
警报（'聊天室第二回调）;
}）;
}
}）;
$阿贾克斯（{
网址：/回声/ HTML /'，
成功：功能（数据）{
requestCallback.addCallbackToQueue（真，函数（）{
警报（'聊天室第三回调）;
}）;
}
}）;
[在code]
VAR MyRequestsCompleted =（函数（）{
VAR numRequestToComplete，requestsCompleted，回调，singleCallBack;
返回功能（选件）{
（！期权），如果期权= {};
numRequestToComplete = options.numRequest || 0;
requestsCompleted = options.requestsCompleted || 0;
回调= [];
VAR fireCallbacks =功能（）{
警报（我们都是完整的）;
对于（VAR I = 0; I＆LT; callBacks.length;我++）回调[I]（）;
};
如果（options.singleCallback）callBacks.push（options.singleCallback）;
this.addCallbackToQueue =功能（isComplete，回调）{
如果（isComplete）requestsCompleted ++;
如果（回调）callBacks.push（回调）;
如果（requestsCompleted == numRequestToComplete）fireCallbacks（）;
};
this.requestComplete =功能（isComplete）{
如果（isComplete）requestsCompleted ++;
如果（requestsCompleted == numRequestToComplete）fireCallbacks（）;
};
this.setCallback =函数（回调）{
callBacks.push（回调）;
};
};
}）（）;
I want to make three ajax calls in a click event. Each ajax call does a distinct operation and returns back data that is needed for a final callback. The calls themselves are not dependent on one another, they can all go at the same time, however I would like to have a final callback when all three are complete.
$('#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*/});
});
Here is a callback object I wrote where you can either set a single callback to fire once all complete or let each have their own callback and fire them all once all complete:
NOTICE
Since jQuery 1.5+ you can use the deferred method as described in another answer:
$.when($.ajax(), [...]).then(function(results){},[...]);
for jQuery < 1.5 the following will work or if you need to have your ajax calls fired at unknown times as shown here with two buttons: fired after both buttons are clicked
[usage]
for single callback once complete: Working Example
// initialize here
var requestCallback = new MyRequestsCompleted({
numRequest: 3,
singleCallback: function(){
alert( "I'm the callback");
}
});
//usage in request
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.requestComplete(true);
}
});
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.requestComplete(true);
}
});
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.requestComplete(true);
}
});
each having their own callback when all complete: Working Example
//initialize
var requestCallback = new MyRequestsCompleted({
numRequest: 3
});
//usage in request
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.addCallbackToQueue(true, function() {
alert('Im the first callback');
});
}
});
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.addCallbackToQueue(true, function() {
alert('Im the second callback');
});
}
});
$.ajax({
url: '/echo/html/',
success: function(data) {
requestCallback.addCallbackToQueue(true, function() {
alert('Im the third callback');
});
}
});
[The Code]
var MyRequestsCompleted = (function() {
var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;
return function(options) {
if (!options) options = {};
numRequestToComplete = options.numRequest || 0;
requestsCompleted = options.requestsCompleted || 0;
callBacks = [];
var fireCallbacks = function() {
alert("we're all complete");
for (var i = 0; i < callBacks.length; i++) callBacks[i]();
};
if (options.singleCallback) callBacks.push(options.singleCallback);
this.addCallbackToQueue = function(isComplete, callback) {
if (isComplete) requestsCompleted++;
if (callback) callBacks.push(callback);
if (requestsCompleted == numRequestToComplete) fireCallbacks();
};
this.requestComplete = function(isComplete) {
if (isComplete) requestsCompleted++;
if (requestsCompleted == numRequestToComplete) fireCallbacks();
};
this.setCallback = function(callback) {
callBacks.push(callBack);
};
};
})();
这篇关于JavaScript回调多个Ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
