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

この記事では、コードの出力シーケンスを分析することで、JavaScript のイベント実行メカニズムを深く理解することができます。

少し前、筆記試験の問題に少し混乱しました。今回はJSのイベント実行の仕組みを徹底的に解析していきます。 [関連する推奨事項: JavaScript 学習チュートリアル]

最初にコードの一部を見てください

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

##シングルスレッド

JS は主にブラウザのスクリプト言語として使用され、# の主な目的です。 ##Js DOM を操作するため、JS はシングルスレッドである必要があると判断されます。JS が Java のようにマルチスレッドの場合、2 つのスレッドで DOM を操作する場合同時に、ブラウザはそれをどのように実行すべきでしょうか?

JS

のリリースは、実際には Java の人気を利用するためのものです。この言語は少し前に書かれたもので、これが JS がシングルスレッドである理由です。

JS の実行メカニズム

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

#同期タスク

• 非同期タスク

同期タスク タスクと非同期タスクが実行スタックに入るとき、JS はまずタスクのタイプ

が同期タスクであることを判断し、メイン スレッド

• # に直接入ります。

  ## は非同期タスクです。

  Event Table
を入力し、コールバック関数を登録します。
• Event Queue

  すべての同期タスクが実行されると、 JS は、

  Event Queue
Read 関数の実行を

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

  イベント ループと呼ばれるものです。

• JS は実行スタックが空であることをどのように判断するのでしょうか

emmmm 、 わからない 。 。 。 。 JS には、実行スタックが空かどうかを判断する独自のロジックが必要です。 #非同期タスク

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

非同期タスクは次のように分類できます

#マクロ タスク

##マイクロ タスク

• 一般的なマクロ タスク

• I/0

#setTimeout

##setInterval

• #一般的なマイクロタスク
約束
.then

.catch

• #回答
  vite 以前に設定したプラグインにいくつかの問題があります。この赤いアラームは無視してください
# Analysis

Started

は同期タスクであり、最初に実行スタックに入ります

executetask( )

関数、

a

は同期タスクであり、実行スタックに入ります。

• async/await は非同期から同期へのプロセスであり、コードの最初の行は同期的に実行される場合、次のコードは非同期になります。 b

  同期タスクとして実行スタックに入る

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

• #これまでのところ、同期タスク キューは

  Started、a

  、
b

• ##これまでの非同期タスクキューはマクロタスク:

  setTimeout
マイクロタスク:

a end

後続のコードがない場合, 印刷順序は次のとおりです

##それでは、マクロタスクの方がマイクロタスクより先に実行されるということではないでしょうか?なぜ##なのかというと、 #setTimeout

で出力 a end その後はどうなりますか? この図を見てください

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

わかりやすく言うと、

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

を出力し、プロセスを続行します。

c

なぜなら、 Promise の変換は同期タスクに変わり、タスク キューに入ります

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

d

タスクキューを同期タスクとして入力します

#これまでの同期タスク キュー

• a

• b

• c

• d

これまでの非同期タスク キュー

#a マイクロタスクの終了

• #c マイクロタスクの終了

• #setTimeout マクロタスク

• #つまり、印刷順序は次のとおりです。

追記

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

[関連ビデオチュートリアルの推奨事項:

Web フロントエンド

]

以上がJSのイベント実行メカニズムの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。