gift only updates at the end of the event

Asked

Viewed 51 times

1

Hello,

I have a button with a click event, and when I click on it, I make an ajax request in a foreach. I would like to open a loading modal to run while the requirements are being made, but the modal only opens when they all end and the event ends.

$(document).ready(function(){
                $('#loading').modal();

                var contadorEnviados = 0;
                var contadorErros = 0;

                $('#botao').click(function(event){
                     event.preventDefault();
                     $('#loading').modal('open');
                     var emails = $('#emails').val().split("\n");

                     emails.forEach(function(email){
                          if(fazRequisicao(email)){
                               contadorEnviados++;
                          }
                          else{
                               contadorErros++;
                          }
                          atualizaContadores(contadorEnviados,contadorErros);
                     });

                     inicializaContador();
                     $('#loading').modal('close');
                });

           });

function does Want

function fazRequisicao(email){
  $.get("teste.php", {email: email}, function(resposta){
      return resposta;
 });

}

javascript jquery ajax front-end events

  • Is that loop synchronous? How do you know when fazRequisicao is over?

  • I’m a bit of a beginner, so I’m sorry about ignoring. What would be a synchronous loop? and I know that it ended when it returns the value there in the function

  • And if you instead of using #loading.modal('open') use style display:block, change the result?

  • Not paul, it is only applied when the block of the event comes to an end

  • You can show the code for this function?

  • I just edited the post, Rgio

Show 1 more comment

1 answer

0


That function fazRequisicao does not give synchronous feedback. The return resposta; has no effect on the if(fazRequisicao(email)){. Namely the forEach run to the end before even the first fazRequisicao reply (you can read more here. You have to change your logic.

You can do that with Promisses, and then you can be sure that all the functions have been called and answered.

Change your function to:

function fazRequisicao(email) {
  return new Promise(function(resolve, reject) {
    $.get("teste.php", {email: email})
      .done(resolve)
      .fail(reject);
      .always(function(xhr, status, deferred) {
        if (deferred.isResolved()) contadorEnviados++;
        else contadorErros++;
        atualizaContadores(contadorEnviados, contadorErros);
      });
  });
});
}

and then you can use Promise.all that waits for all the requests:

$('#botao').click(function(event) {
  event.preventDefault();
  $('#loading').modal('open');
  inicializaContador();
  var emails = $('#emails').val().split("\n");
  Promise.all(emails.map(fazRequisicao)).then(function(respostas) {
    $('#loading').modal('close');
  ));
});

Browser other questions tagged javascript jquery ajax front-end events

You are not signed in. Login or sign up in order to post.