How to use the current value of a variable in a more internal function?

Question

The following code "prints" 50 times the text "Message 50" in a textarea.

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

See the example on jsfiddle.

I understand that this occurs because the value of i is updated in the external function and, at the time of execution of the internal function, the reference points to the updated value.

How to print variable value i corresponding to the iteration number? That is, the value of i at the time when the internal function was created in the setTimeout, resulting in texts from "Message 0" to "Message 49"

Answer 1

Note:

In the modern version of Javascript (from ES6) this problem no longer happens if we use let in the for (let i = 0; ...

More about Let, cont and var here.

---

Answer to the question code:

The problem in the question code is that the cycle for is ready before the function setTimeout() run, thus the value of i It’s already 50 before the code textArea.value += 'Mensagem ' + i + '\n'; be run.

Calling the setTimeout() via extena function to loop cycle, then the value of i which is passed as parameter is the value of each iteration.

You can use it like this:

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);
}

Example

---

Other option, similar, but instead of having an external function, using a function that performs itself within the cycle for, and capturing the value of 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 );
    })()
} 

Example

---

There is yet another way, once the function setTimeout() accepts a third parameter into the function.

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

Example: setTimeout(Function(parameter){ /* code */ }, time, parameter );

Source: MDN ^English

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);
}

Example

Answer 2

The name of the concept that’s causing you trouble is closure ("enclosure" in Portuguese, but this term is rarely used), and refers to how functions defined within a "lexical context" (i.e. the body of a function, a block, a source file) access variables defined in this context.

In Javascript, only functions define a new lexical context (other languages have different rules - some even support the concept of 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)

And each new context created within (inner) of an existing context has access to all variables defined in the "outside" (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;

It is important to note that it does not matter when the internal function will perform, nor what value the external variables had at the time when the object function was created (in contrast to the function definition, which is at compile/interpretation time). What matters is that both share the same variable, and written on one side will reflect on the readings on the other and vice versa.

In your case, you are creating a new (anonymous) function within the lexical context of external code (another? script body function?), and it shares the variable i (and not the value of i). At the moment this function is executed, the loop for has changed its value several times, taking it to its maximum value (50) and that’s what the internal function will access. If the external code modified or reused i for other purposes, this would also be reflected in the internal function (and likewise, if one of the function objects i It would interfere with others too).

There are several ways to modify the code to achieve the desired behavior (i.e. a i different for each object-function) - as already pointed out by @Sergio - but my favorite is the one that makes the nature of closure more explicit (though it looks visually "strange" to anyone unfamiliar with the concept):

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

Note that the i argument of anonymous function is not the same i passed as parameter to the same - since they are in different lexical contexts. It is also worth noting that the variable textArea is still coming from the external context, and depending on the case it may be interesting to include it in the closure also:

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

This ensures that - even if this variable has its value changed (i.e. it points to a different element) - the internal function still has access to the value it had at the time the loop was executed.

Answer 3

With modern Javascript (ES-2015+)

The other answers remain valid, but nowadays we have a standard solution for this with modern Javascript, using variables with block scope declared with let. You should use this solution if:

• Running the code in Node.js; or
• You’re using transpylated Javascript (with Babel, probably); or
• Be pleased with the current compatibility of browsers

With block scoped variables, each loop iteration will create a new variable, captured by closure passed to asynchronous function. The question code starts to work simply by replacing var for 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>