JavaScriptでsleep()関数を実現する方法をわかりやすく解説
sleep()関数とは
sleep()を使うと、関数の実行を一定時間だけ一時停止させることができます。CやPHPなどのプログラミング言語ではsleep(sec)、JavaではThread.sleep()、Pythonではtime.sleep()、Goではtime.Sleep(2 * time.Second)のように呼び出します。
しかし、JavaScriptにはこうしたsleep関数は標準で用意されていません。幸い、Promiseとasync/await構文のおかげで、sleep()と同等の処理を非常に簡単に実装できるようになりました。この記事では、その方法をわかりやすく解説します。
sleep関数の仕組み
JavaScriptでsleep関数を実現するには、PromiseとsetTimeout()を組み合わせます。setTimeout()が指定時間の経過後にPromiseをresolveすることで、awaitしている処理が再開される、という仕組みです。
記述方法1：then()を使う
sleep(ミリ秒).then(() => {
// 処理
})
上記のように、sleep関数をthen()のコールバックと組み合わせて使うことができます。
記述方法2：async/awaitを使う
const work = async () => {
await sleep(ミリ秒)
// 処理
}
work()
上記のように、sleep関数はasync/await関数と組み合わせて使うこともできます。可読性が高く、同期処理のように書けるため、実務ではこちらの方法がよく使われます。
実行例
以下の例では、async/await関数と一緒にsleep()を使用しています。sleep関数はawaitとともに記述され、処理を一時停止させます。まず、async関数が開始されると「Hello Tutorix」というテキストが表示されます。その後、sleep関数によって3秒間処理が一時停止されます。指定時間が経過すると、sleep関数の後に記述されたテキスト（「Welcome to ........」）が表示されます。この処理はループが終了するまで3秒ごとに繰り返され、合計19回テキストが出力されます。
<html>
<body>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function Tutor() {
document.write('Hello Toturix');
for (let i = 1; i <20 ; i++) {
await sleep(3000);
document.write( i +" "+"Welcome to tutorix" + " " + "</br>");
}
}
Tutor()
</script>
</body>
</html>
出力結果
Hello Tutorix // 3秒後 1 Welcome to tutorix // さらに3秒後...テキストは3秒ごとに、ループが終了するまで繰り返されます 2 Welcome to tutorix 3 Welcome to tutorix 4 Welcome to tutorix 5 Welcome to tutorix 6 Welcome to tutorix 7 Welcome to tutorix 8 Welcome to tutorix 9 Welcome to tutorix 10 Welcome to tutorix 11 Welcome to tutorix 12 Welcome to tutorix 13 Welcome to tutorix 14 Welcome to tutorix 15 Welcome to tutorix 16 Welcome to tutorix 17 Welcome to tutorix 18 Welcome to tutorix 19 Welcome to tutorix
-
JavaScriptの関数プロトタイプとは？仕組みと使い方を解説
JavaScriptで作成されたすべての関数には、JavaScriptエンジンによって自動的にprototypeプロパティが追加されます。このprototypeプロパティはオブジェクトであり、デフォルトではconstructorプロパティを含んでいます。関数のプロトタイプには、以下のようにしてアクセスできます。functionName.prototypeコンストラクタ関数を使ってオブジェクトを生成する場合、このprototypeプロパティを活用することで、同じコンストラクタから作成された複数のオブジェクト間でメソッドやプロパティを効率的に共有することができます。これにより、各インスタンスごとに
-
JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説
JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン