非同期処理(JavaScript) 超基礎①

JavaScript習得の上で重要な非同期処理。 触りだけでもちゃんと学ぼうと思います。

まずは非同期処理、同期処理を学ぶ上で鍵となる用語から。

• スレッド プログラムの開始から終了までの一覧の流れのこと。 スレッド＝糸 JavaScriptが実行されるスレッドは、メインスレッドと呼ばれる

• マルチスレッド(並列処理) 一つの処理を複数のスレッドにわけて実行すること

メインスレッドが何らかの処理を行っている時には、他の処理は メインスレッドの完了を待つこととなる

• 同期処理 1つのスレッドで、前の処理の完了を待ってから次の処理を実行すること

同期処理のコード(Jsのみ記載)

function sleep(ms) {
  const startTime = new Date();
  // whileループでmsミリ秒分ループを継続
  while (new Date() - startTime < ms);
  // msミリ秒立つまでは条件がtrueにならない

  alert("sleep関数が完了しました");
}
sleep(3000);

// ボタンにクリック時の処理を実装
const btn = document.querySelector("button");

function clickHandler() {
  alert("ボタンがクリックされました。");
}
btn.addEventListener("click", clickHandler);

• 非同期処理 メインスレッドから一時的に切り離された処理のこと

• 非同期処理の為のAPI setTimeout,setInterval,queueMicroTask など

非同期処理のコード(Jsのみ記載)

function sleep(ms) {
  // setTimeoutを使って、msミリ秒後にダイアログでメッセージを
  // 表示するコールバック関数を実装

  setTimeout(function () {
    alert("sleep関数が完了しました");
  }, ms);

}
sleep(3000);

// ボタンにクリック時の処理を実装
const btn = document.querySelector("button");

function clickHandler() {
  alert("ボタンがクリックされました。");
}
btn.addEventListener("click", clickHandler);
  // ボタンにアクション登録

今回、下記の本を参考にさせて頂きました https://www.shoeisha.co.jp/book/detail/9784798160276