9

Fazendo um simples laço FOR, encontrei um comportamento estranho que não consegui entender.

A contagem se "perde" na requisição AJAX, mantendo o valor do incrementador com o último. A requisição a URL sempre retorna 200 e mesmo assim não influencia em nada para a execução correta.

Há algo relacionado com escopo da variável?

for (i = 0; i < 60; i++) {

  console.log("For:" + i);

  var urlMapas = "http://servicomapas.ibge.gov.br/api/mapas/" + i + '/1';

  $.ajax({
    url: urlMapas,
    dataType: "json",
    success: function(data) {
      console.log("AJAX:" + i);

    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
  • Eu testei seu código e a variável é incrementada um a um até chegar no 60. Eu testei com o console do Chrome. Commented 26/05/2016 às 22:09
  • 1
    Eduardo, você verificou a variável dentro do AJAX? A de fora da requisição é contada normalmente mas a de dentro não. Commented 26/05/2016 às 22:11
  • 2
    Veja se isso ajuda: pt.stackoverflow.com/questions/1859/… Commented 26/05/2016 às 22:12
  • 1
    Eu entendi o que você quer fazer. Se você der um console.log na variável data, você vai ver que as requisições para cada URL estão sendo retornadas. Se você quiser um loop dentro de .success() terá que criar outro for, pois trata-se de uma callback. Commented 26/05/2016 às 22:14

1 Resposta 1

8

Ele não se perde, ele faz exatamente o que foi mandado fazer. O laço é uma coisa e a função passada para o jQuery é outra completamente separada. Isto ocorre porque a função é uma closure. Ela captura a variável, mas não seu estado. Então só o estado final é considerado.

Como pode ser observado no console o laço conta de 0 à 60 perfeitamente e o i fica com este valor quando encerra.

A solução é criar uma função e passar a variável do laço como parâmetro para esta função. E esta função é que deve chamar o AJAX.

for (var i = 0; i < 60; i++) {
    console.log("For:" + i);
    (function(p) {
        $.ajax({
            url: "http://servicomapas.ibge.gov.br/api/mapas/" + p + '/1',
            dataType: "json",
            success: function(data) {
                console.log("AJAX:" + p);
            }
        });
    })(i);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Coloquei no GitHub para referência futura.

Por isso que eu digo que a closure só deveria ser usada em último caso, quando a pessoa sabe todas as consequências dela. jQuery abusa de closures.

1
  • Entendido, @bigown. O link passado pelo Pablo também deu uma esclarecida. Commented 26/05/2016 às 22:22

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