JavaScriptはシングルスレッドであるため、他の言語にあるsleep()関数に直接相当するものがありません。一時停止をシミュレートするには、非同期技術を使用する必要があります。この記事では、setTimeoutとPromiseを使用する方法と、よりクリーンなasync/await構文を利用する方法の2つのアプローチについて説明します。
目次
Promiseを使用したsleep関数の実装
最も簡単な方法は、Promise内でsetTimeoutを使用することです。これにより、メインスレッドがブロックされるのを回避し、アプリケーションの応答性を維持できます。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
sleep(2000)
.then(() => console.log("2秒間スリープしました！"))
.catch(error => console.error("エラーが発生しました:", error));
console.log("これはsleep関数が完了する前に実行されます。");
説明:
sleep(ms): この関数は、スリープ時間（ミリ秒単位のms）を引数として受け取ります。new Promise(resolve => setTimeout(resolve, ms)): Promiseが作成されます。setTimeoutは、msミリ秒後にresolve関数が呼び出されるようにスケジュールします。これによりPromiseが解決され、スリープの終了が示されます。.then(): これは解決されたPromiseを処理し、スリープが完了した後にその中のコードを実行します。.catch(): このオプションの部分は、タイムアウト中に発生する可能性のあるエラーを処理します。
この方法は効率的で、メインスレッドのブロックという落とし穴を回避します。しかし、.then()の使用は、一部のプログラマーには直感的ではないかもしれません。
Async/Awaitを使用したsleep関数の実装
Async/Awaitは、より読みやすく、よりエレガントなソリューションを提供します。これはPromiseベースのアプローチに基づいていますが、非同期フローを簡素化します。
async function sleep(ms) {
await new Promise(resolve => setTimeout(resolve, ms));
}
async function myFunction() {
console.log("開始...");
await sleep(2000);
console.log("2秒間スリープしました！");
}
myFunction();
console.log("これはsleep関数が完了する前に実行されます。");
説明:
async function sleep(ms):asyncキーワードは、非同期関数を示します。await new Promise(...):awaitキーワードは、Promiseが解決されるまでsleepの実行を一時停止します。この一時停止は、メインスレッドをブロックしません。async function myFunction(): この関数は、より大きな非同期操作内でsleepを使用する方法を示しています。
async/await構文により、非同期コードが同期的に見えるようになり、可読性と保守性が向上します。これは、その明瞭さと使いやすさから、一般的に推奨されるアプローチです。
どちらの方法も同じ結果を達成しますが、async/awaitはJavaScriptで非同期操作を処理するためのよりモダンで読みやすい構文を提供します。本番コードではビジーウェイトループを避けてください。アプリケーションがフリーズします。