JSのイベント実行メカニズムの詳細な分析

VUE3.0 をすぐに始める方法:

少し前に筆記試験の問題を勉強し始めたとき、少し混乱しました。今回はJSのイベント実行の仕組みを徹底的に解析していきます。

まずはコードを見てみましょう

。印刷注文を書き出してみてください。

シングルスレッド

JSは主にブラウザのスクリプト言語として使用されます。JS の主な目的は DOM を操作することであり、 Js JS Java のようにマルチスレッドである場合、および 2 つのスレッドが動作する場合はJSシングルスレッドである必要があると判断されます。同時に DOM を実装する場合、ブラウザはそれを実装する方法を教えてください。

JSのリリースは、実際には Java の人気を利用するためであり、この言語は少し前に作成されたため、

JS の実行メカニズムは

シングルスレッドであるため、タスクをソートする必要があります。すべてのタスクはルールに従って実行されます。

• 同期タスク

• 非同期タスク

同期タスクと非同期タスクは、メインスレッドに直接入る場合、JS によって最初にタスクのタイプが

• 同期タスク

• であると判断され、 Event Tableに入り、コールバック関数のEvent Queueに登録されます。

すべての同期タスクが実行された

• 後

• 、JS はEvent Queueに入り、

• すべてのタスクが完了するまでこのプロセスが繰り返し実行されます。これは、事件循环

JS が実行スタックが空であると判断すると

が、うーん、わかりません。 。 。 。 JS には、実行スタックが空かどうかを判断する独自のロジックが必要です。

非同期タスク

非同期タスクの実行順序は次のとおりです。 マクロ タスク -> マイクロ タスク

• マクロ

• タスク

に分割できます。

共通のマクロ タスク

• I/0

• setTimeout

• setInterval

共通のマイクロ タスク

• Promise

• .then

• .catch

Answer

vite より前に設定されたプラグインバージョンに問題があるため、この赤いアラームは無視してください。

分析は

• 同期タスクから开始了、最初に実行スタックに入り

• 、 task() aが実行されます。

• async/await は、非同期から同期へのプロセスです。以下のコードは非同期で実行されます。 b同期タスクとして実行スタックに入り、

• a end非同期タスクのマイクロタスクになり、実行スタックに入ります。

aまでに、同期タスク キューが开始了b

これまでに、非同期タスク キューはマクロを開始しました。タスク: setTimeoutマイクロタスク: a end

後続のコードがない場合、印刷シーケンスは次のようになります。

ここで疑問が生じますが、マクロ タスクがマイクロ タスクよりも先に実行されるということは、なぜa end後にsetTimeoutが出力されるのでしょうか?

看这张图

setTimeout はマクロ タスクとしてタスク キューに入ります。この理由は

一般的に次のとおりです。async

await はマイクロ タスクの生成につながりますが、このマイクロ タスクは現在のマクロ タスクに属します。したがって、最初にa endが実行され、実行後に現在のマクロタスクが終了したと判断されます。次のマクロタスクを実行し、 setTimeoutを出力して

処理を続行します

• c c. Promise の変換により、同期タスクになり、タスクキューに入ります。

• c end Promise から派生したマイクロタスクとしてタスクキューに入ります

• d

ここまでは、同期タスクキュー

• a

• b

• c

• d

• 、

非同期タスクキュー

• a 終了マイクロタスク

• c 終了マイクロタスク

• setTimeout マクロタスク

なので、印刷順序は次のようになります。

追記:

JS の実行メカニズムについての私の理解は多少間違っている可能性がありますので、ご指摘いただければ幸いです。

[おすすめの関連ビデオチュートリアル: Web フロントエンド]

上記は、JS のイベント実行メカニズムの詳細を詳細に分析したものです。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。