8

Escrevi um sistema em Web2py para um cliente, e ele quer que eu automatize um procedimento. Pensei em utilizar Ajax. A ideia é a seguinte:

Tenho uma lista de empresas. Vamos dizer, 50. Quero que a tela abra com a lista de empresas e, no topo delas, que tenha um botão "Iniciar". Quando eu clicar em "Iniciar", a página envia para o servidor uma requisição Ajax pedindo para executar um cálculo para a primeira empresa. Isso é feito porque é um cálculo pesado, e deixar tudo em uma requisição faria o nginx devolver um timeout e o cálculo não iria até o fim.

Já se como fazer pra atualizar o status na tela. Agora vem minha dúvida.

Terminado o cálculo da primeira empresa, automaticamente é chamado o cálculo da segunda empresa. Terminado o da segunda, é chamado o cálculo da terceira, e assim por diante, até terminar o cálculo das demais:

Empresa 1: Ok!
Empresa 2: Ok!
Empresa 3: Processando...
Empresa 4: Aguardando...
...

A ideia é que eu também possa passar pro cálculo alguns parâmetros além do código da empresa, como por exemplo um intervalo de datas.

Como eu posso fazer isso? Devo usar Ajax puro ou posso usar um pacote JS pra isso?

2
  • 1
    Não entendi muito bem sua dúvida: esses parâmetros a serem passados vêm de onde? (algum input do usuário, por exemplo, estabelecidos antes dele clicar em "Iniciar"?) E há alguma restrição em relação à solução, ou é só questão de JS mesmo? (me parece simples de fazer manualmente, caso não haja nenhuma framework em uso capaz disso, pra mim não justifica introduzir uma nova só pra isso)
    – mgibsonbr
    Commented 16/12/2014 às 20:48
  • É puro JS. Suponha que eu possa passar as datas usando <input text>s e lendo os valores usando jQuery, por exemplo. O desafio é chamar os procedimentos sequencialmente. Commented 16/12/2014 às 20:49

4 Respostas 4

6

Eu faria usando o async já que voce esta disposto a usar uma biblioteca externa

$(function() {
  async.eachSeries($('td.usuario').toArray(), function(td, cb) {
    var $td = $(td);

    $.ajax({
        url: 'suaUrl',
    }).done(function(data) {
        cb(); //Use o objeto $td para alterar o status (.siblings('td'))
    }).fail(function() {
        cb(new Error('ops!'));
    });

  }, function(err) {
      if(err) {
          console.log('Algo deu errado...')
      }

      console.log('FIM!');
  });
});

O HTML seria mais ou menos assim.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async.js"></script>

<table>
  <tr>
    <td class="usuario" data-user="101">Fulano</td>  
    <td>Aguardando...</td>  
  </tr>
  <tr>
    <td class="usuario" data-user="129">Ciclano</td>  
    <td>Aguardando...</td>  
  </tr>
  <tr>
    <td class="usuario" data-user="74">Beltrano</td>  
    <td>Aguardando...</td>  
  </tr>  
  <tr>
    <td class="usuario" data-user="2056">Asnésio</td>  
    <td>Aguardando...</td>  
  </tr>  
</table>
2
  • Gostei. Vou implementar e já aceito ela. Valeu! Commented 16/12/2014 às 20:48
  • 2
    @CiganoMorrisonMendez essa solução é bacana porque se você quiser mandar mais de uma requisicao ao mesmo tempo você pode trocar de .eachSeries para .eachLimit facilmente, veja as docs! Commented 16/12/2014 às 20:49
5

Assumindo que todos os seus elementos são irmãos (vários lis por exemplo, ou linhas de uma tabela) você pode fazer a chamada ajax no primeiro e - ao completá-la - passar pro seguinte até que não sobre mais nenhum:

$("#meuid li:eq(0)").each(function processar() {
    var $this = $(this);
    var parametros = $(...)...;
    var idEmpresa = $this.data("empresa");
    $.get(url, params, function(dados) {
        // Tratar dos dados
        $this.next("li:eq(0)").each(processar); // O each se encarrega da condição de parada
    });                                         // quando o next não retornar nenhum elemento
});

Aqui ao usar :eq(0) no seletor do next, garanto que no máximo será retornado um único elemento. Zero se não houver nenhum, e um se houver. A chamada do each é por conveniência mesmo, para poderia-se usar simplesmente uma função com parâmetro.

3
  • Ficou bom também. Só não entendi por que você usa o next sendo que o each já garante um laço de iteração. Commented 16/12/2014 às 21:00
  • É pela assincronicidade: se eu usar um each no conjunto todo, ele vai lançar todas as chamadas ajax sem esperar as anteriores completarem. Dessa forma, só depois que a primeira for recebida é que ele fará a segunda requisição, e só no recebimento da segunda que se fará a terceira, etc (era isso que você queria, não?)
    – mgibsonbr
    Commented 16/12/2014 às 21:01
  • 1
    Exatamente. Muito interessante essa solução. Vou tentar essa também. Commented 16/12/2014 às 21:05
2

Normalmente eu faria um contador e percorreria toda a lista até que atingisse a quantidade total de empresas:

var lista = $('.lista').find('li');
function calcular(loop){
    if (loop <= lista.length){
        var empresa = $('.lista').find('li:eq('+loop+')');
        $.getJSON(empresa.data('url'), function(data) {
           calcular(loop+1);
        }
    }
}
calcular(0);
2
  • Interessante porque usa recursividade. Mas e o desempenho disso? Não ficaria de certa forma prejudicado se a lista for muito grande? Commented 17/12/2014 às 1:17
  • Não vejo problemas de desempenho pois segue a lógica de chamar a próxima requisição quando a atual terminar, funcionando de forma simples como uma fila.
    – Paulo
    Commented 17/12/2014 às 1:58
1

Ajax puro pode resolver seu problema. O termo varia - cascading calls ou sequential async calls:

$.getJSON("http://example.com/jsoncall", function(data) {
        process(data);
        $.getJSON("http://example.com/jsoncall2", function (data) {
            processAgain(data);
            $.getJSON("http://example.com/anotherjsoncall", function(data) {
                processAgainAndAgain(data);
            });
        });
    });

Neste caso, você é responsável por garantir o chaining para o caso de algo dar errado.

Via AngularJS é mais fácil ainda:

$q.all([asyncCall1(), asyncCall2() .....])
3
  • 1
    Não acredito que ele vai ter um numero fixo de empresas Commented 16/12/2014 às 20:44
  • Exato. E esse número vai aumentar. Commented 16/12/2014 às 20:45
  • @renatoargh correto, porém o método process pode servir como callback de uma queue.
    – OnoSendai
    Commented 16/12/2014 às 20:45

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 .