Executando Ajax via JQuery de modo enfileirado – Parte II

[ad#texto]

Já viram o post anterior sobre Ajax e JQuery? Não deixem de ler, nele apresentamos um problema causado pelo assincronismo do Ajax e uma forma simples, porém não ideal, de resolvê-lo.

Para o problema proposto no outro post existe uma forma de realizar a execução assíncrona, sem utilizar .defered e mesmo assim estabelecer que uma execução só irá ocorrer após a outra, isso se deve a um recurso antigo da programação e que nem todo programador domina: a recursividade.

Veja o exemplo anterior, só que modificado:

function execExclu(executou){

 jQuery.each(mapArray, function(i){

  if(executou == i){
   executou ++;
   jQuery.ajax(“/meuScript.php” )
    .done(function() { alert(“Executou com sucesso!”); execExclu(executou); })
    .fail(function() { alert("Erro no processo!"); });

   return false;
  }
 });
}

O exemplo e autoexplicativo, foi criada uma função recursiva que ao ser chamada faz o primeiro step no laço de repetição, aciona o execução Ajax do JQuery e imediatamente retorna falso finalizando a execução do laço, o pulo do gato está no detalhe que por se assíncrono a execução Ajax continua o seu processo e ao finalizar com sucesso ele chama novamente a própria função (recursividade).

Nesta função existe uma variável que é o indexador anterior que comparado com o indexar da atual repetição irá indicar em qual step do laço de repetição a chamada Ajax deve ser acionada.

Nesta técnica aproveitamos o recurso chamado callback que o JQuery implementa de forma maravilhosa, nos callbacks conseguimos executar ações específicas no final da execução, assim podemos ter diversos tipos de processo para cada tipo de callback retornado (sucesso, erro, etc).

Para refinar ainda mais, podemos aproveitar o .ajaxStart() e .ajaxStop() para implementar overlay para indicar de forma visual e bem elegante ao usuário que existe uma execução em andamento e que ele deverá ter paciência até o final da execução.