javascript for loop unexpected behaviour

Question

I have couple of questions about the javascript for loop.

First question:

for (i=0; i<=2; i++) {;}
console.log(i);

Output is 3. Shouldn't it be 2?

Second question:

for (var i=0; i<=2; i++) {
    setTimeout(function(){console.log(i);}, i*1000);
}

Timeouts are set correctly: 0, 1000 and 2000. But the output is 3,3,3 (should be 0, 1, 2). Does this mean the delayed functions are executed the loop exits? 执行延迟函数？ Why?

What should I read to understand all this mysterious javascript stuff?

Thank you.

Answer 1

First question:

No because the i variable is incremented after the last successful iteration, then the condition is checked and it evaluates to false so the loop ends.

The for statement is composed by:

for ([initialExpression]; [condition]; [incrementExpression])
  statement

And it is executed in the following steps:

1. The initialExpression is evaluated at the start
2. The condition is evaluated, if it evaluates to false , the loop ends, if it evaluates to true , the statement is evaluated.
3. Evaluate the statement.
4. The incrementExpression is evaluated, go to step 2.

Second question:

The function is executed asynchronously after the loop has ended, at this time as you know i contains 3 .

The common workaround for this is to use a function to preserve the value of the looping variable on each iteration, for example:

for (var i=0; i<=2; i++) {
  (function (i) {
    setTimeout(function(){console.log(i);}, i*1000);
  })(i);
}

Answer 2

That's because your console.log instruction is outside of the for loop.

This will print it up to two as you intended:

for (i=0; i<=2; i++) {
    console.log(i);
}

For loops will only repeatedly execute what you type within the parentheses. That's why console.log was executed only once.

Source: http://www.kompulsa.com/a-guide-to-for-loops-in-javascript/