每一个（）函数中的多个Ajax调用..然后做一些事情，一旦所有的人都完成了吗？ [英] Multiple ajax calls inside a each() function.. then do something once ALL of them are finished?
问题描述
让我解释一下我的codeA点点（原谅我，如果有些事情错了，我刚刚写了这个例子从头开始，这是非常接近我现在有）。
Let me explain my code a little bit (Excuse me if somethings wrong, I've just written this example from scratch, it is very close to what I currently have).
HTML：
<form id="form">
<!-- Friend 1 -->
Name 1: <input type="text" name="friendName1" id="friendName1" class="friendName" value=""><br />
Email 1: <input type="text" name="friendEmail1" id="friendEmail1" value=""><br /><br />
<!-- Friend 2 -->
Name 2:<input type="text" name="friendName2" id="friendName2" class="friendName" value=""><br />
Email 2:<input type="text" name="friendEmail2" id="friendEmail2" value=""><br /><br />
<!-- Friend 3 -->
Name 3:<input type="text" name="friendName3" id="friendName3" class="friendName" value=""><br />
Email 3:<input type="text" name="friendEmail3" id="friendEmail3" value=""><br /><br />
<!-- Friend 4 -->
Name 4:<input type="text" name="friendName4" id="friendName4" class="friendName" value=""><br />
Email 4:<input type="text" name="friendEmail4" id="friendEmail4" value=""><br /><br />
<!-- Submit -->
<input name="submit" type="submit" value="Submit">
</form>
JS：
$("#form").submit(function(){
$(".friendName[value!='']").each(function(){
var idEmail = 'friendEmail' + $(this).attr("id").replace('friendName','');
if($("#"+idEmail+"[value!='']").length > 0){
var name = $(this).val();
var email = $("#"+idEmail).val();
// Submit the ajax request
$.ajax({
type: 'POST',
url: 'ajax/url',
data: {
name: name,
email: email
},
success: function(json) {
// Log a console entry if our ajax request was successful
console.log(name + " was submitted via ajax");
}
});
}
});
// Redirect the user to the thank you page
setTimeout( function() { window.location= '/thanks'; }, 2000 );
});
的jsfiddle （重定向删除和Ajax调用与小提琴控制台日志代替）
JSFiddle (redirect removed and ajax call replaced with console log for fiddle)
的HTML是一种简单的形式，与朋友的姓名和朋友的电子邮件输入字段。
The HTML is a simple form, with friend name and friend email input fields.
在JS具有的各项功能，它如果名称和相关的电子邮件具有值，它运行Ajax调用。
The JS has an each function, which if the name and associated email have values, it runs an ajax call.
我需要的方式对这些Ajax调用运行（有可能是1环，有可能是15），然后之后便全部结束，重定向到一个新的页面。
I need a way for these ajax calls to run (there could be 1 loop, there could be 15) and then after they have all finished, redirect to a new page.
目前的办法，我这样做是可怕的，因为所有的Ajax调用不完成运行页面重定向之前。
The current way I'm doing it is horrible, as all of the ajax calls do not finish running before the page redirects.
我能做些什么，使这个更好？它必须是万无一失，并且只有重定向一旦所有的Ajax调用已完成（成功或错误，没关系 - 它只是需要重定向，一旦其完成）
What can I do to make this better? It needs to be fool proof and ONLY redirect once all of the ajax calls have finished (success or error, it doesn't matter - it just needs to redirect once its finished).
我用曾尝试异步：假，但它似乎并没有有所作为
I have tried using async: false but it doesn't seem to make a difference.
我也想过把计数器的每个功能，并在阿贾克斯成功功能的计数器，如果他们俩的比赛，然后做重定向，但我在找一些有经验的指导。
I've thought about putting a counter in the each function and a counter in the ajax success function and if they both match, then do the redirect, but I am looking for some more experienced guidance.
推荐答案
使用的延迟对象的：
$("#form").submit(function(e){
e.preventDefault();
var calls = [];
$(".friendName[value!='']").each(function(){
// Submit the ajax request
calls.push($.ajax({
type: 'POST',
url: 'ajax/url',
data: {
name: name,
email: email
},
success: function(json) {
// Log a console entry if our ajax request was successful
console.log(name + " was submitted via ajax");
}
}));
});
$.when.apply($, calls).then(function() {
window.location= '/thanks';
});
});
这篇关于每一个（）函数中的多个Ajax调用..然后做一些事情，一旦所有的人都完成了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
