JavaScriptでsetTimeout()を使い、sleepしてから後続の処理を進める実装
2024/09/11
masyus
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
をつける必要があります。