PHPだとsleep()で簡単に実装できるのですが、JavaScriptで同様のことをする際にsetTimeout()を使う方法を忘れやすいため、備忘録がてら記事にします。

setTimeout() で sleep() と同等に待機する方法

端的には下記のように書けます。

async function hoge() {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    console.log('hoge')
}

この例では関数hoge()が呼び出されてから3秒後にコンソールへ「hoge」を出力するようになります。これだけではありますが、せっかくなので詳細に追ってみます。

setTimeout() の挙動

時間切れになると指定された関数もしくはコードの断片を実行するタイマーの役割を果たします。第一引数に関数もしくはコードの断片を、第二引数に何ミリ秒経過後に第一引数の関数を実行するかをnumberで指定します。

Promise の挙動

Promiseは内部でresolve()を実行すると処理を終えます。setTimeout()の第一引数に渡すことで、Nミリ秒経過後にresolve()を実行させることが可能です。

async/await の挙動

Promiseは本来非同期処理ですが、今回はPromiseの実行を同期的に処理したいため呼び出しの先頭にawaitを、そして内部処理にawaitを使う関数は非同期関数としてasyncをつける必要があります。

参考

• MDN Web Docs setTimeout()
• MDN Web Docs Promise
• Qiita async/await 入門（JavaScript）