0

Preciso chamar uma função no jQuery, porém ela tem que esperar outra função finalizar, pois ela depende do resultado da primeira função para funcionar. Estou utilizando o jQuery.

Segue o primeiro trecho:

$(function(){
    $('#id_gestora').each(function(){
        if( $(this).val() ) {
            $('#id_projeto').hide();
            $('.carregando').show();
            $.getJSON('_model/popularprojeto_gestoraprojeto.php?search=',{id_gestora: $(this).val(), ajax: 'true'}, function(j){
                var options = '<option value="">Selecione um projeto</option>'; 
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id_projeto + '">' + j[i].descricao_projeto + '</option>';
                }
                $('#id_projeto').html(options).show();
                $('#id_projeto').val('<?php echo $projeto_calendariocontabilfundo_edit; ?>');
                $('.carregando').hide();
            });
        } else {
            $('#id_projeto').html('<option value="">Selecione um projeto</option>');
            $('#id_projeto').show();
        }
    });
});

E o segundo, que depende do anterior:

$(function(){
    $('#id_projeto').each(function(){
        if( $(this).val() ) {
            $('#id_calendariocontabil').hide();
            $('#id_calendariocontabil').html('<option value=""></option>');
            $.getJSON('_model/popularcalendariocontabil_projeto.php?search=',{id_projeto: $(this).val(), ajax: 'true'}, function(j){
                $('#id_calendariocontabil').show();
                var options = '<option value="">Selecione um </option>';    
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id_calendario + '">' + j[i].descricao_calendario + '</option>';
                }   
                $('#id_calendariocontabil').html(options).show();
                $('#id_calendariocontabil').val('<?php echo $calendario_calendariocontabilfundo_edit; ?>');
                $('.carregando').hide();
            });
        } else {
            $('.carregando').hide();
            $('#id_calendariocontabil').html('<option value="">Selecione um calendário contábil</option>');
        }
    });
});

1 Resposta 1

1

Como você está tratando com processamentos assíncronos, uma boa opção para o seu caso é utilizar callbacks. Basta que você crie duas funções, fazendo com que uma delas receba um callback.

Basicamente, você pode fazer algo assim:

first(function() {
  second();
  // Chame outras funções aqui...
});

function first(callback) {
  console.log('Função `first` invocada.');

  setTimeout(function () {
    console.log('Chamando o callback...');
    callback();
  }, 1500);
}

function second() {
  console.log('Função `second` invocada.');
}

Para saber mais sobre como os callbacks funcionam, veja esta outra pergunta.

Então, no seu código, você poderia fazer algo assim:

$(function () {
  gestora(projeto);
});

function gestora(callback) {
  $('#id_gestora').each(function () {
    if ($(this).val()) {
      $('#id_projeto').hide();
      $('.carregando').show();
      $.getJSON('_model/popularprojeto_gestoraprojeto.php?search=', {
        id_gestora: $(this).val(),
        ajax: 'true'
      }, function (j) {
        var options = '<option value="">Selecione um projeto</option>';
        for (var i = 0; i < j.length; i++) {
          options +=
            '<option value="' +
            j[i].id_projeto +
            '">' +
            j[i].descricao_projeto +
            '</option>';
        }
        $('#id_projeto').html(options).show();
        $('#id_projeto').val(
          '<?php echo $projeto_calendariocontabilfundo_edit; ?>'
        );
        $('.carregando').hide();

        // Chamar o callback após o sucesso de `getJSON`. Este é assíncrono:
        callback();
      });
    } else {
      $('#id_projeto').html('<option value="">Selecione um projeto</option>');
      $('#id_projeto').show();

      // Chamar o callback no caso do `else`:
      callback();
    }
  });
}

function projeto() {
  $('#id_projeto').each(function () {
    if ($(this).val()) {
      $('#id_calendariocontabil').hide();
      $('#id_calendariocontabil').html('<option value=""></option>');
      $.getJSON('_model/popularcalendariocontabil_projeto.php?search=', {
        id_projeto: $(this).val(),
        ajax: 'true'
      }, function (j) {
        $('#id_calendariocontabil').show();
        var options = '<option value="">Selecione um </option>';
        for (var i = 0; i < j.length; i++) {
          options +=
            '<option value="' +
            j[i].id_calendario +
            '">' +
            j[i].descricao_calendario +
            '</option>';
        }
        $('#id_calendariocontabil').html(options).show();
        $('#id_calendariocontabil').val(
          '<?php echo $calendario_calendariocontabilfundo_edit; ?>'
        );
        $('.carregando').hide();
      });
    } else {
      $('.carregando').hide();
      $('#id_calendariocontabil').html('<option value="">Selecione um calendário contábil</option>');
    }
  });
}

Uma outra opção é utilizar um objeto Deferred do jQuery, que é similar a uma Promise do ECMAScript 2015, mas para esse caso creio que seja demais.

Um adendo importante é que, se você estiver trabalhando com versões mais recentes do ECMAScript, utilizar callbacks pode ser visto como um anti-pattern, já que esse padrão propicia o aparecimento de alguns problemas e existem recursos mais modernos para gerenciar o encadeamento de processos assíncronos, como as Promises.

5
  • Muito obrigado Luiz Felipe, funcionou corretamente, vlw pela força... Viu se eu precisar chamar mais uma function junto com a segunda. Ex.: continuamos com o mesmo cenário, a primeira function roda, assim que ela finalizar estamos rodando a segunda... Teria como rodar uma terceira function junto com a segunda? pode ser ao mesmo tempo que a segunda. 1/07/2020 às 15:21
  • 1
    Nesse caso você passa uma função anônima como callback e chama a segunda e terceira dentro dessa anônima. Eu editei a pergunta... 1/07/2020 às 15:34
  • Ve se eu entendi corretamente, criar uma function com um nome genérico, colocar a segunda e a terceira function dentro desta função genérica... ai sim eu chamo essa function genérica na callback. Seria isso? 1/07/2020 às 15:44
  • Deu certo, kkkk 1/07/2020 às 15:46
  • 1
    Luiz Felipe, muito obrigado mano... Muito rápido e eficaz. Deu abençoe seu dia. 1/07/2020 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .