initiate a function after the previous one is completed

Question

I have three functions:

function atualizarPublicacoes(){
  
  $.ajax({
  url: "{{ path('publicacoes') }}",
  type: 'post',
  dataType: 'json',
  success: function(publicacao){
    $.each(publicacao, function(key, value){
      $('#mural').append(''+value['userNomeSobrenome']+''+moment(value['data']).fromNow()+'
'+value['post']+'
');

      if(value['titulo']){
        $('#cabecalho'+value['id']).append(''+value['titulo']+'');
      }
      if(value['userId'] == "{{app.user.id}}"){
        $('#cabecalho'+value['id']).append('');
      }
      });

    }
  });
};

function atualizarCurtidas(id){

  $.ajax({
    url: "{{ path('publicacoes_footer')}}",
    type: 'post',
    datatype: 'json',  
    success: function(footer){
    
      if(!id){
        var footers = footer;     //atualiza todos os footers - utilizado quando abre a pagina ou publica um novo post
      }else{
        var footers = [footer.find(e => e.id == id)];     //atualiza só o footer clicado
      }
      $.each(footers, function(key, value){
        var acoes = $('#acoes'+value['id']);

        if( value['curtidas'] != null && "{{ app.user.id }}" in value['curtidas']){
          acoes.find('a[title="Comentarios').before(''+value['countCurtidas']+'');
        }else{
          acoes.find('a[title="Comentarios').before('{{ form_start(curtir) }}{{ form_widget(curtir._token) }}{{ form_end(curtir, {"render_rest": false}) }}'+value['countCurtidas']+'');
        }
      });
    }
  });
};

function atualizarComentarios(id){

  $.ajax({
    url: "{{ path('publicacoes_footer')}}",
    type: 'post',
    datatype: 'json',  
    success: function(footer){
    
      if(!id){
        var footers = footer;     //atualiza todos os footers - utilizado quando abre a pagina ou publica um novo post
      }else{
        var footers = [footer.find(e => e.id == id)];     //atualiza só o footer clicado
        $('#acoes'+footers[0]['id']).parent().next().find('ul').empty();
      }
      $.each(footers, function(key, value){
        if(value['countComentarios'] > 0){
          $('#acoes'+value['id']).append(''+value['countComentarios']+'');            

          $(value['comentarios']).each(function(key, comm){
            $('#comentarios'+value['id']).append(''+comm['userNome']+''+moment(comm['data']).fromNow()+'
'+comm['texto']+'');
            
            $('#comentarios'+value['id']).addClass(value['countComentarios'] > 2 ? '3mais' : '');

          })
        }else{
          $('#acoes'+value['id']).append('0');
        }
        if(!id){
          $('#comentarios'+value['id']).after(' 0 ?'Escreva seu comentário...' : 'Seja o primeiro a comentar...') +'" class="p-2 mx-1 col-11" maxlength="250">{{ form_start(comentar) }}{{ form_widget(comentar._token) }}{{ form_end(comentar, {"render_rest": false}) }}');
        }
      });

      if(!id){
        $('ul.list-unstyled li:nth-child(n+3)').hide();
        $('ul.3mais li:nth-last-child(1)').after('Carregar mais comentários');
      }
    }
  });
};

and then i call them:

$(document).ready(function(){

  moment.locale('pt-BR');
  atualizarPublicacoes();
  atualizarComentarios();
  atualizarCurtidas();
  Notiflix.Notify.Init({
    position: 'center-top'
  });
  Notiflix.Confirm.Init({
    titleColor: '#ff5549',
    okButtonBackground: '#ff5549'
  });

});

When I load the page the first one executes but I think that it's finishing after the other 2 finishes because it loads more content (takes more time) so it's like the last two ones didn't executed as they use elements of the previous function to work.

How can I make the second one (AtualizarComentarios) initiate after the first (AtualizarPublicacoes) is completed and the third one after the second?

I call them on other events as well so I can't put them all togheter in one function.

Thanks!

trincot · Accepted Answer

jQuery ajax methods return promise compatible objects, so you could use that. For instance, change the first function to the following -- the key is to use then instead of success and to return the result of the then call:

function atualizarPublicacoes(){
  return $.ajax({
//^^^^^^
    url: "{{ path('publicacoes') }}",
    type: 'post',
    dataType: 'json'
  }).then(function(publicacao){
//  ^^^^^^
    $.each(publicacao, function(key, value){
      // ... etc ...
    });
  });
};

Do the same with the other two functions.

In the calling code, either chain then calls, or (simpler) use the async/await syntax:

$(document).ready(async function(){
//                ^^^^^
  moment.locale('pt-BR');
  await atualizarPublicacoes();
//^^^^^
  await atualizarComentarios();
  await atualizarCurtidas();
  
  Notiflix.Notify.Init({
    position: 'center-top'
  });
  Notiflix.Confirm.Init({
    titleColor: '#ff5549',
    okButtonBackground: '#ff5549'
  });
});

initiate a function after the previous one is completed

Answers (1)

Related Questions