Múltiplas chamadas ajax dentro de uma função each () .. então faça algo quando TODOS eles terminare
Deixe-me explicar um pouco o meu código (desculpe-me se algo estiver errado, acabei de escrever este exemplo do zero, é muito parecido com o que tenho atualmente
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 (redirecionamento removido e chamada ajax substituída pelo log do console para violino)
O HTML é um formulário simples, com o nome do amigo e os campos de entrada de e-mail do amig
O JS possui uma função each, que, se o nome e o email associado tiverem valores, ele executará uma chamada aja
Preciso de uma maneira para que essas chamadas ajax sejam executadas (pode haver 1 loop, 15) e, depois que todas elas terminarem, redirecione para uma nova págin
A maneira atual como faço é horrível, pois todas as chamadas ajax não terminam de executar antes que a página seja redirecionad
O que posso fazer para melhorar isso? Ele precisa ser à prova de idiotas e SOMENTE redirecionar quando todas as chamadas ajax forem concluídas (êxito ou erro, isso não importa - ele só precisa redirecionar quando terminar
Eu tentei usarasync: false
mas não parece fazer a diferença.
ensei em colocar um contador em cada função e um contador na função de sucesso do ajax e, se ambos corresponderem, faça o redirecionamento, mas estou procurando orientação mais experient