The execution timing of the JS function

Let’s take a look at the following code and see what it prints. 0,1,2,3,4,5 or 6,6,6,6,6,6,6?

let i = 0 for(i= 0; i<6; i++){ setTimeout( () => { console.log(i) },0) }Copy the code

The answer is: six sixes.

Let’s explain the setTimeout function: Suppose Jack Bauer is playing a game at home. His mother asks jack Bauer to go to dinner. Jack Bauer says he will come right away. So does Jack Bauer stop playing the game immediately and go to eat or finish the game first and then go to eat? This “soon” is the equivalent of setTimeout, eating is console.log, and playing games is the for loop.

Why does this happen to you? SetTimeout is an asynchronous function, so the execution process of this code becomes a complete loop, because each loop will put the console.log in the timer (setTimeout) on standby, waiting for the end of the loop. There will be six console. logs on standby, which is when I becomes six, and six console.log(I) is executed, so it will eventually print six 6s. In other words, when does the function start to be called, and when does the value of the parameter start to be queried

How to solve this problem? Still want to print 0,1,2,3,4,5? . In the new ES6 syntax, the let declaration appears to solve this problem. We can modify the above code slightly:

for( let i= 0; i<6; i++){ setTimeout( () => { console.log(i) },0) }Copy the code

Just changing the position of the let and combining the for loop with the let declaration plays a magical role. This is the realization of JS’s fantasy of Xiao Bai and the great love for Xiao Bai.

Are there any other ways not to use let besides the above method? There are two other ways to do this

  1. One is to usesetTimeoutThe other argument to
    for(var i= 0; i<6; i++){
        setTimeout(function(i) {
            conosole.log(i)
        },0,i)
    }
Copy the code
  1. Using the principle of closure, using the immediate execution function, the timer is wrapped, the first for loop ends, the current I as a parameter to the immediate execution function and save the result; The second for loop is printed by the timer.
for(var i=0; i<6; ++i) { ! function(j) { setTimeout(function(){ console.log(j) }, 0) }(i) }Copy the code