forループの実行前に関数の結果が表示される

Question

私の質問は、なぜ関数の結果がブラウザのforループの前に表示されるのですか？ループ（1、2、3、4、5）のために実行する必要がありますが、最初に（ 'cool'と1！2！3）を実行するので、コードとコンソールの結果を追加します。誰かがこの行動を私に説明できるなら、とても感謝しています。重複しているわけではありません。私はそれがどのように機能するのか理解したいのです。提案された質問には、最初にsetTimeoutを使ってループを実行するソリューションがありますが、動作を完全に説明することはできません。他の後のコード1のブロックを実行して動作するJavaScript

// 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

。したがって、forループで始まり、foo2.doAnother()で終わる1ブロックのコードがあります。しかし、setTimeoutへの呼び出しはすぐにはコードを実行しません。つまり、新しいコードブロックをキューに入れます（console.log(i)ブロック）。だからあなたのコードはもっとよく似ています。

1. 5つの 'タイマー'機能をキューに入れます。それぞれが実行される前に、1秒、2秒、3秒などを待機しなければならず、それぞれは現在のブロックの後に実行する必要があります。
2. 'CoolModule'コードを実行します。
3. （あなたが実行終了を書いたコード）
4. （1Sを待つ）
5. timer()
6. の最初のインスタンスを実行します（別の1秒を待つ）
7. はtimer()
8. などの2番目のインスタンスを実行します。..