非同期処理について

Writer： tokuyasu　更新日：2023/10/13

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、非同期処理について説明します。

スレッド
同期処理と非同期処理
イベントループについて

スレッド

スレッドとは、プログラムの開始から

処理までの一連の処理の流れのこと。

JavaScriptはコードが1行ずつ実行されて行く。

処理の開始から終了までを、

１つの糸のようにあらわすことができることを

「１つのスレッドでコードが実行されている」と表現される。

前の処理が完了してから次の処理が実行されること

シングルスレッドと呼ぶ。

複数の処理を別々のスレッドに分けて

同時に実行することを

マルチスレッドと呼ぶ。

（並列処理と呼ばれる）

同期処理と非同期処理

同期処理とは、ひとつのスレッドで、

前の処理の完了を待ってから次の処理を実行すること。

非同期処理とは、スレッドから一時的に切り離された処理のこと。

（setTimeoutに渡すコールバック関数、promiseなど）

イベントループについて

実行コンテキスト

JavaScriptエンジンによって準備されるコードの実行環境のこと。

コードが実行される際に必ず実行コンテキストが生成される。

コールスタック（実行コンテキストスタック）

実行コンテキストが積み重なってできたものを

「コールスタック」と呼ぶ。

このような処理の仕組みをLIFOと呼ぶ。

（ラストインファーストアウト、最後に入れたものを最初に取り出す。）

イベントループ

コールスタックにコンテキストが積まれているのか定期的に監視し、

コンテキストが積まれていない場合、キューに通知する。

タスクキュー

実行待ちのタスクが格納されるキューのこと

（キューとはデータの出し入れをリスト形式で管理するデータ構造のことを指す）

非同期処理の実行順を管理し、

キューに入った順番で処理を行う。

このような処理の仕組みをFIFOと呼ぶ。

（ファーストインファーストアウト、最初に入れたものを最初に取り出す。）

イベントループから通知を受けると、

コールスタックにタスクを渡す。

const btn = document.querySelector("button");
btn.addEventListener("click", function task2() {
  console.log("task2 done");
});

function fn() {
  setTimeout(function task1() {
    console.log("task1 done");
  }, 4000);

  const startTime = new Date();
  while (new Date() - startTime < 5000);
  console.log("fn a done");
}

fn();