1

Qual o motivo de meu for não chegar a chamar a função showSeatStatus(i);?

window.onload = function() {
    //Conecta os eventos de imagem de poltrona
    for (var i = 0; i < tamanhoMatriz; i++) {
        document.getElementById("acento"+i).onclick = function(evt) { //ELE PASSA AQUI
            showSeatStatus(i); // ELE NÃO PASSA AQUI
        };
    }
};

se eu fizer sem o for, ele roda normal, assim:

 document.getElementById("acento"+0).onclick = function(evt) {
            showSeatStatus(0);
        };

O problema é que ele não esta chamando a função showSeatStatus(i); em momento algum.

1
  • Se você der um alert dentro da função onclick ele alerta?, Acredito que o problema seja que a função onclick é um listener ou seja ela ficaria esperando a ação do click, ai quando carrega o for vai girar mas se o click não for efetuado não chamará a showSeatStatus 19/07/2017 às 10:37

1 Resposta 1

2

O problema tem a ver com closures que faz com que todas as funções de click estejam relacionadas com a mesma variável i, e por isso com o seu valor final.

Para contornar este efeito basta trocar var por let, que força com que a variável apenas exista naquele bloco, que foi uma das ideias por trás desta nova sintaxe:

for (let i = 0..

Exemplo:

const tamanhoMatriz = 4;

window.onload = function() {
  //Conecta os eventos de imagem de poltrona
  for (let i = 0; i < tamanhoMatriz; i++) {
    document.getElementById("acento" + i).onclick = function(evt) { //ELE PASSA AQUI
      showSeatStatus(i); // ELE NÃO PASSA AQUI
    };
  }
};

function showSeatStatus(indice){
  console.log("Status em " + indice);
}
<div id="acento0">div1</div>
<div id="acento1">div2</div>
<div id="acento2">div3</div>
<div id="acento3">div4</div>

4
  • Eu tava escrevendo sobre isso, mas você foi mais rápido (e eu não teria escrito tão bem). +1. 19/07/2017 às 11:42
  • Funcionou, porem eu não entendi o funcionamento :/, fui pesquisar sobre clousers e let, eu entendi que o let só roda em escopo de bloco. porem não entendi o clousers nesse código. 19/07/2017 às 18:06
  • @NicolasGuilhermeMatheus closure é o mecanismo de a função guardar os valores que precisa para mais tarde executar, valores que só existem naquele momento, como o i em showSeatStatus(i);. Lembre-se que quando a função executa, bastante tempo depois, teoricamente o i já nem existiria.
    – Isac
    19/07/2017 às 18:55
  • @Isac, de primeiro momento ainda não está claro pra mim, mas pode deixar que vou entender com o tempo, iniciei meus estudos sobre JS recentemente. Agradeço por me explicar como funciona, e pelas palavras closure e let, que já me adicionou um conhecimento a mais, como por exemplo, em JS você pode atribuir um valor a uma variável não declarada e depois declara-la, que mesmo assim o código funcionará, em tempo de execução o JS manda para cima todas as variáveis. 19/07/2017 às 19: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 .