JavaScript

JavaScriptのsetTimeout0秒時の動きを理解する

どうも、つよぽんです!

今回は、「非同期処理の実行の流れ」と「キュー」について解説していきます。

なお、今回の記事は「非同期処理の流れを理解している」ことを前提とした解説となるので、非同期処理の流れを理解していない方は、先に前回記事「JavaScriptの非同期処理ではキューを使う【キューとは?】」を読むことをオススメします。

今回の記事は次のような方に向けて書きました。

想定読者
  • 非同期処理の流れは理解している
  • setTimeoutの使い方を理解していない
  • setTimeoutに0秒をセットしたときの処理の流れを説明できる自信がない

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • setTimeoutの使い方がわかるようになる
  • setTimeoutに0秒(0ミリ秒)をセットした時の非同期処理の流れを説明できるようになる

今回の記事の内容は以下のスライドの解説記事となっております。今回の解説記事と以下のスライド記事をあわせて使うことでより深く学習できます。

あわせて読みたい
【JavaScript】setTimeoutを使った非同期処理これまでJavaScriptの非同期処理の流れを学習してきました。今回はさらに一歩進んでsetTimeoutメソッドに0秒をセットしたときの処理の流れを図とサンプルコードを使って解説していきます。今回の内容を理解できると非同期の流れはだいぶ理解してきているといって良いでしょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. setTimeoutの使い方(JavaScriptの非同期メソッドの1つ)
  2. setTimeoutに0秒をセットしたときの非同期処理の流れを理解する

setTimeoutの使い方(JavaScriptの非同期メソッドの1つ)

この章では「setTimeout」メソッドの使い方を解説します。

setTimeoutメソッドの具体的な使い方は以下の画像にまとめたので、そちらを参考にして頂けたらと思います。

setTimeoutの使い方setTimeoutの使い方

以下の画像はsetTimeoutメソッドを使って、コードの記述の順番と、実際に処理が実行される順番が一致していないことをあらわした様子です。(画像をクリックすると別タブで画像を開きます。)

setTimeoutを使ったサンプルコードsetTimeoutを使ったサンプルコード

上の画像で使われているサンプルコードは以下のリンク先からも直接確認できます。

setTimeoutの挙動

画像内の赤枠部分ではsetTimeoutに0秒をセットしており、0秒後にコールバック関数を実行するような実装になっています。

しかし、実際の出力をみると、0秒後に実行されるコールバック関数はすぐに実行されるわけではなく、1番最後のconsole.logが実行されてから、2番目に実行されています。

この理由を理解するためには、前回記事「JavaScriptの非同期処理ではキューを使う【キューとは?】」の内容を理解する必要があります。

つまり、実行される関数が積まれる「スタック」と、完了した非同期処理が追加される「キュー」の関係を理解することで、setTimeoutに0秒をセットしてもすぐに実行されない理由がわかるようになります。

その理由を、次の章で実際にスライドを使いながら解説していきます。

setTimeoutに0秒をセットしたときの非同期処理の流れを理解する

キューに追加されたタスク(コールバック関数)は、空になったスタックに積まれる

setTimeoutに0秒をセットしたときの非同期処理の流れについては以下のスライドを使いながら解説していきます。(スライドの9~22ページを参照してください。)

 

前回記事「JavaScriptの非同期処理ではキューを使う【キューとは?】」のおさらいになりますが、非同期関数(メソッド)の処理の流れは以下のようになります。

非同期関数の流れ
  1. 非同期関数実行時にスタック(コールスタック)に積まれる(同期関数と同じ)
  2. すぐにスタックから取り除かれ、スタック外で処理が行われる(まだ、非同期関数の処理が完了していない状態)
  3. スタック外で行われている非同期処理が完了したら、非同期関数にセットしたコールバック関数がキューに追加される
  4. スタック(コールスタック)の中が空になったら、キューからコールバック関数を取り出して、そのコールバック関数をスタック(コールスタック)に積む
  5. スタック(コールスタック)に積まれたコールバック関数が実行されて、そのコールバック関数の処理が完了したらスタック(コールスタック)から取り除かれる

ここで注目してほしいのは④の「スタックの中が空になったら、キューからコールバック関数を取り出してスタックに積む」の部分です。

つまり、メインの処理(同期処理)が1通り完了するまでは、キューの中のタスク(コールバック関数)は待ちの状態になります。

スーパーのレジ待ちで例えるなら、メインの処理(同期処理)が1番目のお客さんで、キューで待ちの状態にいるタスク(コールバック関数)は1番目のお客さんの会計が終わるのを待っている状態といえます。

そして、1番目のお客さんの会計が終わってから、次のお客さん(キューで待機していたタスク)が会計処理に入ることが出来るイメージです。

動画で非同期処理の流れを理解する

以下の動画の14分55秒くらいから、setTimeoutに0秒をセットしたときの処理の流れをアニメーション付きで解説していてイメージが付きやすいので、一度観ることをオススメします。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • setTimeoutを使って、指定した時間(ミリ秒)が経過したら実行したい処理をコールバック関数としてセットすることが出来る
  • setTimeoutに0秒をセットしてもスグには処理されず、メインの処理(同期処理)が1通り完了してから、setTimeout0秒のコールバック関数が実行される
  • スタックとキューの処理の流れは「スーパーのレジ待ち」をイメージするとわかりやすい

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】setTimeoutを使った非同期処理これまでJavaScriptの非同期処理の流れを学習してきました。今回はさらに一歩進んでsetTimeoutメソッドに0秒をセットしたときの処理の流れを図とサンプルコードを使って解説していきます。今回の内容を理解できると非同期の流れはだいぶ理解してきているといって良いでしょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です