函数结果出现在for循环执行之前

Question

My question is: why function results appears before for loop in browser console? It should run for loop (1, 2, 3, 4, 5), but it run ('cool' and 1!2!3) first, so below I add my code and console result. I'll be very thankful if someone can explain me this behaviour. It is not a duplicate, because, I want to understand how it works, not to make it work. In suggested question there is a solutions to run for loop with setTimeout first, but not explain behaviour completely.

// Loops + Closure
for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    }, i * 1000)
}

//Modules
function CoolModule() {
    let something = 'cool'
    let another = [1, 2, 3]

    function doSomething() {
        console.log(something)
    }

    function doAnother() {
        console.log(another.join('!'))
    }

    return {
        doSomething: doSomething,
        doAnother: doAnother
    }
}

let foo2 = CoolModule()

foo2.doSomething() // 'cool'

foo2.doAnother() // 1 ! 2 ! 3

console result

Answer 1

JavaScript works by running blocks of code one after the other. So you have one block of code that starts with the for loop and ends with foo2.doAnother() . But the calls to setTimeout don't run the code immediately -- they put new blocks of code in the queue -- the console.log(i) blocks. So your code works more like;

1. Put five 'timer' functions in the queue. Each one must wait 1s, 2s, 3s, etc before it's executed, and each must execute after the current block.
2. Execute the 'CoolModule' code.
3. (the code you wrote finishes executing)
4. (wait 1s)
5. run the first instance of timer()
6. (wait another 1s)
7. run the second instance of timer()
8. etc...