javascript sleepを自作して待機時間を作る

作成日 2020.10.18
更新日 2022.07.12
javascript
javascript

javascriptで、PromiseとsetTimeoutを使用してsleepを自作して待機時間を作るサンプルコードを記述してます。

1. 環境
2. sleep機能作成
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

sleep機能作成

非同期処理のPromiseとsetTimeoutを使用すると、以下のコードで、待機時間を作ることが可能です

function hoge () { console.log('hoge') };

function sleep (time, func) {
	return new Promise( function(resolve) {
		setTimeout(function(){
			resolve(func())
		}, time * 1000)
	})	
}

// 5秒まって、hogeを実行する
sleep(5, hoge)

実行結果

関数はアロー関数で記述すると、もう少しスッキリに記述できます。

javascript アロー関数のサンプル

let hoge = () => console.log('hoge');

const sleep = (time, func) => {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve(func())
		}, time * 1000)
	})	
}

// 5秒まって、hogeを実行する
sleep(5, hoge)

サンプルコード

以下は、
「実行」ボタンをクリックすると、5秒待機した後にテキストを表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span class="badge badge-success"></span></h2>

    <button id="btn" type="button" class="btn btn-raised btn-danger">
      実行
    </button>

  </div>

  <script>

    // 実行する関数
    let foo = () => document.getElementsByClassName("badge")[0].textContent = '5秒経過しました';

    // sleep
    const sleep = (time, func) => {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(func())
        }, time * 1000)
      })
    }

    function hoge() {
      sleep(5, foo)
    }

    // ボタンを取得
    let elmbtn = document.getElementById('btn');
    
    // クリックイベントを登録
    elmbtn.onclick = function () {
      hoge();
    };


  </script>
</body>

</html>

待機時間が作れていることが確認できます。