JavaScriptの非同期処理とは?setTimeoutで流れの違いを理解した話

記事
デザイン・イラスト
今日はJavaScriptの「非同期処理」について学習しました。

これまでは、上から順番に処理が実行される「同期処理」が基本だと考えていましたが、
setTimeoutを使うことで、処理の実行タイミングが変わることを知りました。

今回のコードでは、

「処理1 → 処理2 → 処理3」と順番に実行されたあと、
setTimeoutで設定した処理4は2秒後に実行されます。

その間も処理は止まらず、
「処理5 → 処理6」と続いて実行されるため、

実際の実行順は、

処理1
処理2
処理3
処理5
処理6
(2秒後)処理4

という流れになりました。

setTimeoutは処理を一度保留しておき、
指定した時間が経過したあとに実行される仕組みになっているため、
このような順番になります。

この仕組みを理解することで、
時間差のある動きや表示の制御などができるようになると感じました。

少しずつですが、できることが広がってきている実感があります✨


スクリーンショット 2026-03-27 23.18.15.png

スクリーンショット 2026-03-27 23.18.32.png
処理1が隠れてますが処理2の上にあります!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら