Existe alguma maneira de verificar se a requisição ainda não finalizou pelo próprio jQuery?
Uma forma simples seria adicionar uma variável de controle. Ao completar a requisição do ajax, definir um valor nessa variável. Fazer assim nas 4 requisições. Dessas forma, utilizar o Promise .aways()
da requisição ajax.
eu gostaria de desabilitar o botão enquanto todas as requisições não voltarem
Daí podemos fazer uma função para verificar se todas as requisições foram completadas. Caso sim, habilita novamente o botão...
estou realizando as requisições com a estrutura $.post({},function(){});
Nesse caso, vou usar $.ajax()
.
Leitura recomendada: SOen - $.post()
vs $.ajax()
Teoria explicada, vamos ao código:
var requisicoes = 0;
$(function(){
$('#btnIniciar').on('click', function(){
$(this).prop('disabled', true); // Desabilitei o botão!
fazerRequisicoes(); // Chamei as requisições
});
});
function fazerRequisicoes()
{
// Requisição #1
$.ajax({
url: 'http://foo.bar.com.br/baz/1',
method: 'post',
dataType: 'html',
// Tudo que vai passar via POST
// Pode passar um form.serialize() também
data: {
// Td que vai passar via post
}
})
.done(function(ret){
// Tudo que acontece quando terminar com sucesso
console.log('Requisição #1 finalizada com sucesso.');
})
.fail(function(erro){
// Tudo que acontece quando terminar com erro
console.log('Requisição #1 finalizada com erro.');
})
.always(function(){
// Tudo que acontece quando terminar
// Seja com sucesso ou com erro
// Como o nome sugere: sempre vai ser executado
requisicoes++;
console.log('Requisições terminadas: '+requisicoes);
if (checaRequisicoes(4)) // Serão 4 requisições no total!
habilitaBtn();
});
// Requisição #2
$.ajax({
url: 'http://foo.bar.com.br/baz/2',
method: 'post',
dataType: 'html',
// Tudo que vai passar via POST
// Pode passar um form.serialize() também
data: {
// Td que vai passar via post
}
}).done(function(ret){
// Tudo que acontece quando terminar com sucesso
console.log('Requisição #2 finalizada com sucesso.');
}).fail(function(erro){
// Tudo que acontece quando terminar com erro
console.log('Requisição #2 finalizada com erro.');
}).always(function(){
// Tudo que acontece quando terminar
// Seja com sucesso ou com erro
// Como o nome sugere: sempre vai ser executado
requisicoes++;
console.log('Requisições terminadas: '+requisicoes);
if (checaRequisicoes(4)) // Serão 4 requisições no total!
habilitaBtn();
});
// Requisição #3
$.ajax({
url: 'http://foo.bar.com.br/baz/3',
method: 'post',
dataType: 'html',
// Tudo que vai passar via POST
// Pode passar um form.serialize() também
data: {
// Td que vai passar via post
}
}).done(function(ret){
// Tudo que acontece quando terminar com sucesso
console.log('Requisição #3 finalizada com sucesso.');
}).fail(function(erro){
// Tudo que acontece quando terminar com erro
console.log('Requisição #3 finalizada com erro.');
}).always(function(){
// Tudo que acontece quando terminar
// Seja com sucesso ou com erro
// Como o nome sugere: sempre vai ser executado
requisicoes++;
console.log('Requisições terminadas: '+requisicoes);
if (checaRequisicoes(4)) // Serão 4 requisições no total!
habilitaBtn();
});
// Requisição #4
$.ajax({
url: 'http://foo.bar.com.br/baz/4',
method: 'post',
dataType: 'html',
// Tudo que vai passar via POST
// Pode passar um form.serialize() também
data: {
// Td que vai passar via post
}
}).done(function(ret){
// Tudo que acontece quando terminar com sucesso
console.log('Requisição #4 finalizada com sucesso.');
}).fail(function(erro){
// Tudo que acontece quando terminar com erro
console.log('Requisição #4 finalizada com erro.');
}).always(function(){
// Tudo que acontece quando terminar
// Seja com sucesso ou com erro
// Como o nome sugere: sempre vai ser executado
requisicoes++;
console.log('Requisições terminadas: '+requisicoes);
if (checaRequisicoes(4)) // Serão 4 requisições no total!
habilitaBtn();
});
}
function checaRequisicoes(numRequisicoes)
{
if (requisicoes >= numRequisicoes)
return true;
else
return false;
}
function habilitaBtn()
{
// Após tudo terminar, vai esperar 3 segundo pra habilitar o botão
setTimeout(function(){
$('#btnIniciar').prop('disabled', false);
}, 3000);
requisicoes = 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Projeto secreto</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button type="button" id="btnIniciar">Iniciar requisições ajax</button>
</body>
</html>
Fiz esse código ignorando qualquer boa prática de estética e dinâmica, de forma que fique claro para melhor entendimento.
Como comentei, pode criar um plugin para as requisições do ajax, caso haja semelhança entre as suas requisições (não anexo à pergunta). O intuito aqui é mostrar uma simples forma de "conferir" se suas requisições foram completadas (com erro ou não) para re-habilitar o botão.
beforeSend: function(){}
? Daria pra colocar uma variável de controle nele... Cada requisição iria definir essa variável, e ao final, todas iriam executar uma função pra checar se as outras requisições já foram finalizadas. Se servir pra vc, posso formular uma resposta nesse sentido. – LipESprY 16/12/18 às 10:05$.post()
pro$.ajax()
... Pode até mesmo fazer um plugin pra facilitar na reutilização do código... Se te interessar, posso formular uma resposta dando uma solução pro seu problema. – LipESprY 16/12/18 às 17:24