イベントサイクルの階段:macrotaskとmicrotaskの応用

2466 ワード

タイトル:
setTimeout(()=>{
    console.log(0)
},1000);

new  Promise((resolve,reject)=>{
    console.log(1);
    resolve();
})
.then(()=>{
    setTimeout(()=>{
        console.log(3)
    },0);
    console.log(4);
})

process.nextTick(()=>{
    console.log(5);
})

setTimeout((()=>{
    console.log(6);
    return ()=>{
        console.log(7);
    }
})(),2000);

setTimeout(()=>{
    console.log(8);
},0)
順次出力しますか1->6->5->4->8->3->0->7
解析:
  • macrotask(task):マクロタスクは、各スタックのコードを実行する(イベントキューからイベントコールを取得して実行スタックにセットすることを含む).メインコードブロック(同期)、set Timeout、set Interval(非同期)などの
  • を含む.
  • microtask(jobs):マイクロタスクは、task実行終了直後に実行されるタスクで、promiseのthen、process.nextTickなどの
  • を含む.
    実行過程:macrotask->microtask->レンダリング->(次のラウンド)macrotask->microtask->レンダリング->
    運転メカニズム:
  • は、マクロタスクを実行し(スタック内でイベントキューから取得していない)、実行中にマイクロタスクが発生した場合、それをマイクロタスクのタスクキューに追加する
  • .
  • マクロタスクの実行が完了したら、現在のマイクロタスクキューのすべてのタスク(順次実行)
  • を実行します.
  • 現在のマクロタスクの実行が完了し、レンダリングのチェックを開始し、GUIスレッドのレンダリングを引き継ぐ
  • .
  • レンダリングが完了したら、JSスレッドは引き継ぎを続け、次のマクロタスク(イベントキューから取得)を開始します.この問題に対して:まず上から下へ解析し、同期タスク(マクロタスクに属します)を実行し、1,6(すぐに関数を実行し、同期タスク)を出力します.
    参考:【第1219期】ブラウザからJSシングルスレッドまで、JSシステムが最も全面的に整理されています.
    JavaScript:同期、非同期、イベントサイクルを徹底的に理解する(Event Loop)