Academia de Software

O problema:

Temos uma aplicação com um form bastante complexo que, quando aberto para edição, preenche os dados via AJAX e, conforme for o resultado do AJAX e as permissões do usuários, ações possíveis são habilitadas.

O código usado (inicialmente):

$( document ).ready(function() {
 
	preenche_form();
	exibe_botoes();
	preenche_tema($('#acao_eixo'));
});

Porém, ocorre o seguinte: A função preenche_form(), que realiza a consulta via AJAX demora mais que as outras, assim, a função exibe_botoes() é executada antes do preenchimento do form, gerando um resultado indesejado pois, para habilitar os botões corretos, a exibe_form() depende do preenchimento da preenche_form().

Os botões a serem habilitados (um conjunto conforme o status preenchido no form pela função preenche_form()):

Num primeiro momento tentamos usar a função ‘when‘ do jQuery:

$( document ).ready(function() {
 
	$.when(preenche_form()).done(function(){exibe_botoes();});
 
         preenche_tema($('#acao_eixo'));
});

Porém, também não funcionou.

Resta então apresentar alguma teoria, estudar um pouco para compreender a solução:

jQuery e AJAX funcionam de forma assíncrona, ou seja, por óbvio, sem sincronia. É o que acontece no caso em comento, é chamada a função que preenche o formulário e, antes desta terminar, a aplicação já chama a segunda que habilita os botões, porém, esta segunda depende do resultado da primeira, assim, o negócio simplesmente não funciona, nenhum botão da aplicação é habilitado nunca, pois a segunda função não tem parâmetros para trabalhar.

Assim, é necessário alterar o comportamento padrão do jQuery, ou seja, torná-lo síncrono, com execução em sequência, aguardando o término da primeira função para só então executar a segunda.

E aqui mais um pouco de aprendizado:

O jQuery tem funções de categoria “Deferreds”, ou diferidas, adiadas. Mas o que isso significa na prática?

Quando uma função desse tipo é chamada, normalmente as de execução mais demorada, a função retorna uma “promise”, ou promessa, de que irá concluir em algum momento, porém, o programa não espera e, enquanto aguarda o “cumprimento da promessa” já vai chamando as funções seguintes. Tá aí a execução assíncrona.

Como exemplos de função “deferred” temos o $.ajax e $.animate.

As funções que criamos, como as do exemplo, em regra não são do tipo deferred, assim, usar when com estas funções, não vai dar resultado algum, vai continuar sendo executado “tudo junto”.

Aliás, a função when existe justamente para que possamos, conforme a necessidade de nossa aplicação, executar funções de forma encadeada, ou seja, assim que esta terminar, execute esta….

Com uma leve pincelada de compreensão de como funciona o trem, podemos concluir então que não tem jeito, certo?

Errado!

O jQuery oferece ferramentas para transformarmos qualquer função comum no tipo deferred.

Vamos a como fazer:

Na função preenche_form() incluímos as funções Deferred, promise e resolve:

function preenche_form()
{
     atrasa=new $.Deferred(); //avisa que é uma função do tipo diferido, mesmo que originalmente não fosse
 
     //seu código
 
     atrasa.resolve(); //avisa que a função terminou, coloque no ponto em que as ações terminam (pode ser usado mais de um...)
 
     //seu código
 
     return atrasa.promise(); //envia a promessa que vai terminar alguma hora
};

É isso, problema resolvido, em, breve um modelinho funcional.

Um pouco de história:

Outros meios de se fazer a mesma coisa é com callbacks, ou seja, encadear as funções de modo a executar uma por vez, comprometendo a performance. Outro método um pouco menos pior, era usar Timeouts nas funções, ou loops que eram executados enquanto a função não terminava. O when certamente é uma solução mais elegante.