TIL

TIL List

Event Loop

アクティビティリングの長さはどうですか.

私の事件の循環に対する比喩

1) Event Loop

イベントループを理解するために、多くのブログや技術書を参考にしたが、「イベントループとは何か」と明確に定義された文章はほとんど見られなかった.
イベント・ループの定義は、それぞれ異なります.共通の説明は次のとおりです.
JavaScriptは、単一スレッドベースの言語です.これは,主スレッドのアクティブループが単一スレッドであるため,主スレッドと呼ばれる.
まず、イベントループの感覚を見つけるために、次のコードを見てみましょう.

console.log("1")

setTimeout(function cb () {
  console.log("2")
}, 3000)

console.log("3")

上のコードの実行順序は何ですか?JAvascriptは単一スレッド言語で、1回印刷してsettimeout関数を待って2を印刷して、最後に3を印刷しますか?
正解は以下の通りです.

console.log("1")

setTimeout(function cb () {
  console.log("2")
}, 3000)

console.log("3")

// 1
// 3
// 2

これは非常に難解な現象だ.結果はさっき説明したのとは違います.
ここではアクティブループについての役割です.

2)活動環の長さはどうですか。

アクティブリングは、上の画像と同じ構造を有する.
以下は私が各語について主観的に簡単に説明します.
Heap:変数や関数などのメモリセットの場所
Call Stack:実行コードを格納する場所.これは先入後出(FILO)の構造であり,関数呼び出し時にcallスタックにプッシュされる.
Web API:DOM、Ajax、settimeoutを含むブラウザが提供するAPI
Callback Queue:イベント発生時に実行するコールバック関数が一時的に停止する場所
はい、今私は大体の構造と意義に対して一定の理解があって、コードを見てみます.

console.log("1")

setTimeout(function cb () {
  console.log("2")
}, 3000)

console.log("3")

// 1
// 3
// 2

このコードを実行すると、イベントループは次の実行プロセスを実行します.

コールスタックにはconsole.log("1")個あります.

対応するコードを実行します.

console.log("1")はcallスタックから削除されます.

callスタックにはsetTimeout関数が含まれています.

setTimeout関数を実行して、ブラウザが提供するWeb APIを呼び出します.

setTimeout関数はcallスタックから削除されます.

コールスタックにはconsole.log("3")個あります.

対応するコードを実行します.

console.log("3")はcallスタックから削除されます.

setTimeout関数の3秒後、コールバック関数cb()はコールバックキューに入る.

イベントループcallスタックが空であるかどうかを確認し、callbackキューを確認します.

cb()関数が見つかり、callスタックに追加されました.

対応するコードを実行します.

cb()関数はcallスタックから削除されます.

実際、過程を文字で羅列するだけで、非常に単純なパターンが形成されています.
イベントループのパターンは次のとおりです.
イベントループは、まずcallスタックにスタックされたコードを処理します.非同期関数が中間的に実行される場合、その関数のコールバック関数をコールバックキューにプッシュし、次のコールバックスタックを処理します.callスタックが処理されたら、callbackキューを見つめて処理します.

3）私の事件の循環に対する比喩

活動サイクルを忙しい会社員にたとえたい.
例えば、Aという会社員がやるべきことが1から10まであるとします.
Aが1から10まで順次動作し,1分以内にそれを解決すると仮定する.
Aの机の上で...2...3... 逐次漸進的に書類を蓄積し、事を解決している.
次に、4番ファイルが約3秒以内に考慮すべき問題であると仮定します.
この場合、まず4番を横に置いて次のドキュメントを処理します.
5..6..7..8... やばい、9番の書類は約5秒かかります.
まずは9日も横に置いて10日まで行います
そして4番ファイル、9番ファイルの順に作業を行います.
仕事終わりました!