並行動作をシミュレートします

Question

私はJSをさらに理解しようとしています。

console.log(0); 
setTimeout(function() { render('header', 10000000); }, 0); 
console.log(1); 
setTimeout(function() { render('content', 10000); }, 0); 
console.log(2); 
setTimeout(function() { render('footer', 100); }, 0); 
console.log(3); 

function render (element, iteration) { 
    console.log('render', element); 

    // Hard work 
    for(var i=0 ; i < iteration; i++) { 
    Math.cbrt(i); 
    } 

    console.log('rendered', element); 
} 

しかし、それはいつも同じことをレンダリングています：私は、並列関数呼び出しを行うために何かを実装しようとした

0 
1 
2 
3 
render header 
rendered header 
render content 
rendered content 
render footer 
rendered footer 

と私は本当に理由を理解していません。私は施設や他の図書館を使いたくない。

この魔法の背後には何が起こっていますか？

Answer 1

JSはまだシングルスレッドです。 setTimeoutは別のスレッドを開始しません。 setTimeoutを使用して3つのコールバック関数を追加し、それぞれ0ms後に実行するように指示します。彼らはすべて実行する必要があるものの列に入ります。その後、それらは個別に同じスレッド上で実行されるため、最初の「レンダリングヘッダー」関数は、実行する関数のキューから次のコールバックを取り除くことをブロックします。

HTML web workersこれを行うには何かがありますが、自分で使ったことはありません。

Answer 2

JavaScriptはコードを実行するために1つのスレッドを使用します。 setTimeoutを使用すると、処理準備が整うとすぐにイベントループにエントリが追加されます。遅延を指定しなかったので、エントリは直接作成されますが、エントリを作成する初期コードが完了した時点でのみ実行されます。詳細はMDN ページを参照してください。