【フロントエンド基本知識】イベントループイベントループメカニズム(非常にわかりやすく、知識ポイントを習得する必要があり、収集をお勧めします)

それは何ですか?

イベントループはJavaScriptのイベントループメカニズムであり、コールスタック、マイクロタスクキュー、メッセージキューの3つの部分で構成されています

プロジェクトに取り組んでいると、自分の考えどおりに最終的な注文が実行されないことに気付くことがあります。実際、問題は、イベントループのイベントループメカニズムがわからないことです。

 使い方?

シナリオ1:イベントループが開始すると、グローバルから1行ずつ実行されます。関数呼び出しが検出されると、呼び出しスタックにプッシュされます。関数が戻ると、呼び出しスタックからポップされます。 。

プロセス:この質問には、2つの関数定義と1つの関数呼び出しが含まれていますfun2()が呼び出されると、呼び出しスタックにプッシュされて関数が実行されます。最初に「2」が出力され、次にfun1()が呼び出され、fun1()が呼び出しにプッシュされます。スタックし、fun1()が実行され、「1」が出力され、 fun1()の実行後に呼び出しスタックからポップされます。引き続きfun2()が実行され、「3」が出力されます。

シナリオ2:jsの非同期操作(fetch、setTimeout、setInterval)が呼び出しスタックにプッシュされると、内部のメッセージはメッセージキューに送られ、メッセージキューは呼び出しスタックが空になるまで待機してから実行されます。

プロセス:この質問には、2つの関数定義と1つの関数呼び出しが含まれています。fun2()が呼び出されると、それは呼び出しスタックにプッシュされ、関数が実行されます。最初にsetTimeoutの非同期操作が発生するため、console.log(2)が最初にメッセージキューに移動し、すべて呼び出し内の関数が実行されます。終了後、メッセージキュー内のメッセージを実行します次に、fun1()を実行し、「1」を出力します。fun1()関数は、呼び出しスタックをポップアップします。fun2()を実行し続け、「3」を出力します。すべての関数が実行された後、メッセージキュー内のメッセージを実行できます「2」が出力されます

シナリオ3:promise、async、awaitの非同期操作がマイクロタスクに追加され、コールスタックが空になるとすぐに実行されます。コールスタックに追加されたマイクロタスクはすぐに実行されます。マイクロタスクキュー(マイクロタスク)は、メッセージキュー(マクロタスク)の前に実行されます

プロセス:まず、コールスタックに追加されたマイクロタスクがすぐに実行されるため、Promiseのコンテンツが最初に実行され、「4」が出力され、resolve(5)もすぐに実行されます(ただし、resolveの出力その後、promiseのコンテンツが呼び出しスタックからポップされ、fun2()が呼び出されると、呼び出しスタックにプッシュされ、setTimeoutが発生すると、その中のメッセージはメッセージキューに入れられます;fun1()を実行し、"1"を出力します;次にconsole.log(3)を実行し、"3"を出力します;そして実行します。次に、その中のメッセージはマイクロタスクに入れられますキュー、コールスタックのすべての機能が実行されたら、最初にマイクロタスクキューを実行します。content、出力 "5" ;最後にメッセージキューのコンテンツを実行し、出力 "2" ;

以上がイベントループの内容です。普段のプロジェクトでよくある問題点や筆記試験の知識、CSDNでの面接を共有し一緒に進んでいきます。

おすすめ

転載: blog.csdn.net/weixin_46318413/article/details/121943131