一定時間待つ処理(setTimeout・await)

このレッスンでは、setTimeoutとawaitを組み合わせて一定時間処理を待つ方法を学び、タイミングを制御するプログラムを書けるようになることを目標にします。「JavaScript setTimeout await」で調べている方向けの内容です。

setTimeout()をPromiseで包んでawaitすると、指定した時間だけ処理を一時停止できます。アニメーションのタイミング調整や、連続した処理の間隔をあけたいときに使います。setTimeout()本来はコールバック関数を渡す仕組みですが、Promiseで包むことでawaitと組み合わせて使えるようになります。

サンプルコードでは、new Promise((resolve) => setTimeout(resolve, 500))という形で、500ミリ秒後に完了するPromiseを作り、それをawaitで待っています。「処理を始めます」と表示されてから、少し間をおいて「0.5秒後に実行されました」と表示される様子を確認してみましょう。

初心者がよくつまずくのが、setTimeout()単体では待つことができず、Promiseで包む必要がある点です。setTimeout(resolve, 500)という書き方は、「500ミリ秒後にresolve関数(処理の完了を知らせる関数)を呼び出す」という意味になっており、この仕組みを理解しておくと非同期処理全体の理解も深まります。

サーバーへの過剰なリクエストを避けるために少し待ってから再試行する、といった実務のシーンでもよく応用されるテクニックです。非同期処理の基本である「待つ」という操作を、シンプルな例で体感してみましょう。