JavaScriptでsleep（スリープ）機能を実現する方法！

JavaScriptには、他のプログラミング言語のようにプログラムを一時停止させるsleep機能が標準では存在しません。

でも、JavaScriptを使っていると一定時間待ってから処理を実行したいときがありますよね。ご安心ください！JavaScriptでもsleep機能を実装する方法があります。

この記事では『JavaScriptでsleep（スリープ）機能を実現する方法』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

• sleep機能とは
• JavaScriptでsleep機能を実現する方法
  • setTimeoutを使う方法
  • setIntervalを使う方法
  • Promiseを使う方法
  • async/awaitを使う方法
• 1行で書けるsleep関数

sleep機能とは

sleep機能は、プログラムの実行を一定時間停止させる機能です。以下のような場面で役立ちます。

• 待機処理
  • サーバーからの応答を待つときや、一定時間後に処理を再開する場合。
• 負荷の軽減
  • ループ処理やタイマー間隔を調整してCPU負荷を抑える場合。
• アニメーションの制御
  • ウェブアプリやゲームでの動きのタイミング調整。

JavaScriptでsleep機能を実現する方法

Pythonではtime.sleep(秒数)というメソッドが提供されていますが、JavaScriptには標準的なsleep関数がありません。しかし、以下の方法を使うことでsleep機能をJavaScriptで実現することができます。

それぞれの方法について、シンプルなサンプルコードを用いて解説します。

setTimeoutを使う方法

setTimeoutは、指定した時間後に一度だけ関数を実行するタイマー機能です。この特性を活用すれば、sleep機能を実現できます。サンプルコードを以下に示します。

function sleepWithSetTimeout(duration, callback) {
  setTimeout(callback, duration);
}

// 例: 2秒後にメッセージを表示
sleepWithSetTimeout(2000, () => {
  console.log('2秒経過しました');
});

上記のサンプルコードでは、setTimeoutを使って2秒後にメッセージを表示しています。なお、直接setTimeoutを呼び出しても問題ありません。sleepWithSetTimeoutは単にsetTimeoutをラップして関数としてまとめただけです。

setTimeout(() => {
  console.log('2秒経過しました');
}, 2000);

setIntervalを使う方法

setIntervalは、指定した時間間隔で繰り返し処理を実行するタイマー機能です。これを応用すれば、sleep機能を実現できます。サンプルコードを以下に示します。

function sleepWithSetInterval(duration, callback) {
  const interval = setInterval(() => {
    clearInterval(interval); // タイマーを停止
    callback();
  }, duration);
}

// 例: 2秒後にメッセージを表示
sleepWithSetInterval(2000, () => {
  console.log('2秒経過しました');
});

上記のサンプルコードでは、setIntervalを使って2秒後にメッセージを表示しています。

Promiseを使う方法

Promiseは非同期処理を扱う際に役立つオブジェクトで、resolveやrejectを使用して状態を操作できます。setTimeoutをPromise内で使用することで、sleep機能を実現できます。サンプルコードを以下に示します。

function sleepWithPromise(duration) {
  return new Promise((resolve) => setTimeout(resolve, duration));
}

// 例: 2秒後にメッセージを表示
sleepWithPromise(2000).then(() => {
  console.log('2秒経過しました');
});

async/awaitを使う方法

async/awaitを使うと、非同期処理を同期的に記述できるため、コードの可読性が大幅に向上します。Promiseを利用したsleep関数をawaitと組み合わせて使用します。サンプルコードを以下に示します。

function sleep(duration) {
  return new Promise((resolve) => setTimeout(resolve, duration));
}

async function main() {
  console.log('スリープ開始');
  await sleep(2000); // 2秒待機
  console.log('2秒経過しました');
}

main();

1行で書けるsleep関数

以下に示すようにsleep関数は1行で書くこともできます。

const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration));

async function main() {
  console.log('スリープ開始');
  await sleep(2000); // 2秒待機
  console.log('2秒経過しました');
}

main();

本記事のまとめ

この記事では『JavaScriptでsleep（スリープ）機能を実現する方法』について、説明しました。JavaScriptには標準でsleep機能はありませんが、setTimeoutやPromise、async/awaitを使うことで簡単に実現できます。それぞれの方法には特徴があり、用途に応じて最適なものを選ぶことが大切です。

• 短いコードで済ませたい場合
  • setTimeoutを使う
• 非同期処理をスッキリ書きたい場合
  • Promiseやasync/awaitを使う

お読み頂きありがとうございました。