4

A variável role recebe um novo valor em cada Loop, quando ela está dentro do $.getJSON ela pega o segundo valor do array e não muda mais. Há dois console.log(); no código, coloquei o retorno deles ao lado do mesmo. Alguém sabe a causa disso e como me desfazer desse cenário indesejável?

$(document).ready(function() {
  var emails = ["[email protected]", "[email protected]"],
    TeamRole = ["founder", "manager"],
    hashMail;

  for (var i=0 ; i < emails.length ; i++){ 
    hashMail = "http://www.gravatar.com/" + md5(emails[i].toLowerCase().trim()) + ".json?callback=?";
    role = TeamRole[i];
    console.log(role); // > founder > manager

    $.getJSON(hashMail, function (data) {
      console.log(role); // > manager > manager
      $("#profile-container").append(
            "<div>" +
                "<img src='" + data.entry[0].thumbnailUrl + "?s=200>" +
                "<p>" + data.entry[0].displayName + "</p>" +
                "<p>" + self.role + "</p>" +
                "<p>" + data.entry[0].aboutMe + "</p>" +
            "</div>";
      );
    });
  };
});
2

1 Resposta 1

5

O problema é que getJSON é assíncrono. Quando o callback executa, o loop já terminou. O escopo das suas variáveis é a função que as contém (no caso, o callback do document.ready), e não o bloco do loop. Uma solução é introduzir uma nova função, executada imediatamente, capturando cada valor da variável role separadamente:

for (var i=0 ; i < emails.length ; i++){ 
  hashMail = "http://www.gravatar.com/" + md5(emails[i].toLowerCase().trim()) + ".json?callback=?";
  var role = TeamRole[i];
  console.log(role); // > founder > manager
  (function(role) {
      $.getJSON(hashMail, function (data) {
        console.log(role); // > manager > manager
        $("#profile-container").append(
              "<div>" +
                  "<img src='" + data.entry[0].thumbnailUrl + "?s=200>" +
                  "<p>" + data.entry[0].displayName + "</p>" +
                  "<p>" + role + "</p>" +
                  "<p>" + data.entry[0].aboutMe + "</p>" +
              "</div>";
        );
      });
  }(role));
};

Nota: adicionei var para declarar sua variável role, pois ela estava virando global.

3
  • Funcionou, porém tem mais um comportamento "estranho". O array de emails, suponhamos que ele contenha "[email protected]" e "[email protected]". Apesar da função ser APPEND o código insere de trás pra frente. 13/03/2014 às 18:18
  • 2
    Ele "appenda" na ordem em que as respostas chegarem. Não há garantia de ordem para recebimento das respostas de requisições assíncronas. A resposta que chegar primeiro é inserida primeiro, e fica antes na lista.
    – bfavaretto
    13/03/2014 às 18:22
  • @PhellipeLins Se não conseguir resolver essa questão da ordem do append, sugiro postar uma pergunta separada, pois é um problema totalmente diferente.
    – bfavaretto
    13/03/2014 às 18:30

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 .