Is there any way to verify that the request has not yet been finalized by jQuery itself?
A simple way would be to add a control variable. When completing the ajax request, set a value in this variable. Do so in the 4 requisitions. In this way, use Promise .aways() of the request ajax .
I would like to disable the button while all requests do not come back
From here we can make a function to check if all the requests have been completed. If yes, enable the button again ...
I'm making requests with the $.post({},function(){}); structure
In this case, I'll use $.ajax() .
Recommended reading: SOen - $.post() vs $.ajax()
Theory explained, let's go to the code:
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><buttontype="button" id="btnIniciar">Iniciar requisições ajax</button>
</body>
</html>
I made this code ignoring any good practice of aesthetics and dynamics, so be clear for a better understanding.
As I said, you can create a plugi n for ajax requests if there is similarity between your requests (not attached to the question). The purpose here is to show a simple way to "" check if your requests have been completed (with error or not) to re-enable the button.
