JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでsleep()を実現する方法とは？awaitの使い方を解説

JavaScriptには、C言語やPythonのような標準のsleep()関数は用意されていません。その代わりとなるのが「await」です。awaitを使用すると、現在実行中のasync（非同期）関数の処理を、指定した時間だけ一時停止することができます。

具体的な実装方法としては、setTimeout()をPromiseでラップした関数を作成し、それをawaitで呼び出します。これにより、sleepとまったく同じ動作を実現できるのです。

サンプルコード

以下のコードを実行して、JavaScriptでのsleepの実装を実際に確認してみましょう。

ライブデモ

<!DOCTYPE html>
<html>
   <body>
      <script>
         function setSleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
         }
         async function Display() {
            document.write('Wait for 5 seconds!');
            await setSleep(5000);
            document.write('After 5 seconds!');
         }
         Display();
      </script>
   </body>
</html>

コードの解説

このコードの仕組みを順番に見ていきましょう。

まず、setSleep()関数は引数で受け取ったミリ秒後にresolveされるPromiseオブジェクトを返します。次に、async関数として定義されたDisplay()の中でawait setSleep(5000)を呼び出すことで、処理がちょうど5秒間停止します。

その結果、「Wait for 5 seconds!」というメッセージが表示された後、5秒経過してから「After 5 seconds!」が出力されます。このように、awaitとPromiseを組み合わせれば、同期処理のように読みやすいコードで待機時間を制御できるのが大きなメリットです。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. JavaScriptの無名関数（匿名関数）とは？基本の書き方と使い方をわかりやすく解説

    無名関数（匿名関数）とはJavaScriptには、関数を定義する方法として「関数宣言」と「関数式」があります。このうち関数式は、関数宣言とほぼ同じ構文で記述でき、さらに次の2種類に分けられます。名前付き関数式：関数に名前が付けられているもの（コールスタック上で名前が表示されるため、デバッグ時に便利です）無名関数（匿名関数）：関数に名前を付けずに定義するもの本記事では、後者の「無名関数」について、基本的な書き方と使い方を解説します。無名関数の基本的な書き方無名関数は、functionキーワードで関数を定義し、そのまま変数に代入する形で記述します。関数名を指定しない点が最大の特徴です。var my