39

O seguinte código "imprime" 50 vezes o texto "Mensagem 50" em um textarea.

for (var i = 0; i < 50; i++) {
    setTimeout(function() {
        textArea.value += 'Mensagem ' + i + '\n';
        textArea.scrollTop = textArea.scrollHeight;
    }, 100 * i);
}

Veja o exemplo no jsfiddle.

Eu entendo que isso ocorre porque o valor de i é atualizado na função externa e, no momento da execução da função interna, a referência aponta para o valor atualizado.

Como fazer para imprimir o valor da variável i correspondente ao número da iteração? Ou seja, o valor de i no momento em que a função interna foi criada na chamado do setTimeout, resultando em textos de "Mensagem 0" a "Mensagem 49"

0

3 Respostas 3

31

Nota:

Na versão moderna de JavaScript (a partir de ES6) este problema já não acontece se usarmos let no for (let i = 0; ...

Mais sobre let, cont e var aqui.


Resposta ao código da pergunta:

O problema no código da pergunta é que o ciclo for fica pronto antes de a função setTimeout() correr, assim o valor de i já é 50 antes do código textArea.value += 'Mensagem ' + i + '\n'; ser corrido.

Chamando o setTimeout() via função extena ao ciclo loop, então o valor de i que é passado como parametro é o valor de cada iteração.

Pode usar assim:

var textArea = document.getElementById('a');
var tempo = function (pTempo) {
    setTimeout(function () {
        textArea.value += 'Mensagem ' + pTempo+ '\n';
        textArea.scrollTop = textArea.scrollHeight;
    }, 100 * pTempo);

}
for (var i = 0; i < 50; i++) {
    tempo(i);
}

Exemplo


Outra opção, parecida, mas em vez de ter uma função externa, usando uma função que se auto-executa dentro do ciclo for, e que captura o valor de i:

var textArea = document.getElementById('a');
for (var i = 0; i < 50; i++) {
    (function () {
        var iScoped = i;
        setTimeout(function () {
            textArea.value += 'Mensagem ' + iScoped + '\n';
            textArea.scrollTop = textArea.scrollHeight;
        }, 100 * iScoped );
    })()
} 

Exemplo


Existe ainda outra maneira, uma vez que a função setTimeout() aceita um terceiro parâmetro para dentro da função.

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

Exemplo: setTimeout(function(parametro){ /* codigo */ }, tempo, parametro );

Fonte: MDN Inglês

var textArea = document.getElementById('a');
for (var i = 0; i < 50; i++) {
    setTimeout(function(i) {
        textArea.value += 'Mensagem ' + i + '\n';
        textArea.scrollTop = textArea.scrollHeight;
    }, 100 * i, i);
}

Exemplo

3
  • 1
    Obrigado, Segio. A primeira solução parece ser a mais limpa, embora eu tenha que escrever mais código. O segundo exemplo era um no qual eu havia pensado de forma ligeiramente diferente. O terceiro parece que tem problemas com IE 8 e anteriores.
    – utluiz
    Commented 27/12/2013 às 14:24
  • 2
    Resposta do tipo "compre 1 leve 3".
    – utluiz
    Commented 27/12/2013 às 14:26
  • 1
    @utluiz, :) - Sim, concordo que a primeira é a melhor. Na primeira solução pode ser melhor usar um outro nome de variável como parametro da função, para o caso de haver algum i defenido no mesmo escopo. Corrigi agora a resposta tambem.
    – Sergio
    Commented 27/12/2013 às 14:28
12

O nome do conceito que está te causando confusão é closure ("clausura" em português, mas esse termo é raramente utilizado), e se refere à forma como funções definidas dentro de um "contexto léxico" (i.e. o corpo de uma função, um bloco, um arquivo fonte) acessam variáveis definidas nesse contexto.

Em JavaScript, apenas funções definem um novo contexto léxico (outras linguagens têm regras diferentes - algumas sequer suportam o conceito de closure):

var a = 10; // Mesmo "a" para script1.js, script2.js, etc (efetivamente, uma global)
function f() {
    var b = 20; // Um "b" diferente para cada invocação de f
    if ( x ) {
        var c = 30; // Mesmo "c" dentro e fora do if (i.e. o contexto é "f", não o bloco if)

E cada novo contexto criado dentro (inner) de um contexto já existente tem acesso a todas as variáveis definidas no "de fora" (outer):

function x(a1) {          // "x" tem acesso a "a"
    var a2;
    function y(b1) {      // "y" tem acesso a "a" e "b"
        var b2;
        function z(c1) {  // "z" tem acesso a "a", "b", e "c"
            var c2;

É importante observar que não importa quando a função interna irá executar, nem qual o valor as variáveis externas tinham no momento em que o objeto função foi criado (em contraste com a definição da função, que é em tempo de compilação/interpretação). O que importa é que ambas compartilham a mesma variável, e escritas de um lado refletirão nas leituras do outro e vice-versa.

No seu caso, você está criando uma nova função (anônima) dentro do contexto léxico do código externo (outra função? corpo do script?), e ela compartilha a variável i (e não o valor de i). No momento que essa função é executada, o laço for já alterou seu valor várias vezes, levando-a ao seu valor máximo (50) e é isso que a função interna vai acessar. Se o código externo modificasse ou reutilizasse i para outros propósitos, isso também se refletiria na função interna (e da mesma forma, se um dos objetos-função alterasse esse i isso interferiria nos outros também).

Existem várias maneiras de se modificar o código para se atingir o comportamento desejado (i.e. um i diferente para cada objeto-função) - como já apontado por @Sergio - mas a minha preferida é aquela que torna a natureza do closure mais explícita (ainda que pareça visualmente "estranha" para quem não está familiarizado com o conceito):

for (var i = 0; i < 50; i++) {
    (function(i) {
        setTimeout(function() {
            textArea.value += 'Mensagem ' + i + '\n';
            textArea.scrollTop = textArea.scrollHeight;
        }, 100 * i);
    })(i);
}

Note que o i argumento da função anônima não é o mesmo i passado como parâmetro para a mesma - uma vez que estão em contextos léxicos diferentes. Também cabe ressaltar que a variável textArea ainda está vindo do contexto externo, e dependendo do caso pode ser interessante incluí-la no closure também:

    (function(i, textArea) { ... })(i, textArea);

Isso garante que - ainda que essa variável tenha seu valor alterado (i.e. aponte para um elemento diferente) - a função interna ainda tenha acesso ao valor que ela tinha no momento em que o loop foi executado.

3
  • 1
    Seria bom ressaltar o return para retornar uma definição de função para o setTimeout Commented 27/12/2013 às 19:22
  • @Victor Desculpe, não entendi... Você está se referindo ao fato de que o que é passado pro setTimeout não é a primeira função [a que recebe parâmetro], mas sim aquela que é retornada por sua invocação? Isso está correto - ainda que nesse caso particular tenha ficado um pouco estranho. Aliás, vou reescrever essa função para ficar mais de acordo com a ideia que eu queria passar.
    – mgibsonbr
    Commented 27/12/2013 às 19:42
  • 1
    Sim, está correto mesmo! Só ressaltei o fato de não ser algo simples e esclarecer um pouco mais para os iniciantes esse fato e explicar melhor. Principalmente para o fato de que setTimeout recebe uma definição de função. Commented 27/12/2013 às 23:04
6

Com JavaScript moderno (ES-2015+)

As outras respostas continuam válidas, mas hoje em dia temos uma solução padrão para isso com JavaScript moderno, utilizando variáveis com escopo de bloco declaradas com let. Você deve usar esta solução se:

  • Estiver rodando o código em Node.js; ou
  • Estiver utilizando JavaScript transpilado (com Babel, provavelmente); ou
  • Estiver satisfeito com a compatibilidade atual dos browsers

Com variáveis com escopo de bloco, cada iteração do loop irá criar uma nova variável, capturada pela closure passada à função assíncrona. O código da pergunta passa a funcionar simplesmente substituindo var por let:

const textArea = document.querySelector('textarea');

for (let i = 0; i < 50; i++) {
    setTimeout(function() {
        textArea.value += 'Mensagem ' + i + '\n';
        textArea.scrollTop = textArea.scrollHeight;
    }, 100 * i);
}
<textarea></textarea>

3

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 .