JavaScriptでsleep関数を実装するやり方【Promise＆await】

同期的なコードを書きたい場合・・・

PHPだったら sleep(10) とかすれば 10秒間スリープできます。

でもJavaScriptでは、仕様的な理由でsleep関数が存在しません。

でも作り方がようやく分かったので、
ここでは JavaScriptで sleep関数を実装する方法＆コード例をまとめときます。

このページの目次

JSでのsleep関数作成に必要な３つの知識
sleep関数を実装する手順＆コード例
ついでに awati と async の互換性について（蛇足）
JSでのsleep関数実装まとめ

JSでのsleep関数作成に必要な３つの知識

まずsleep関数作成には次の３つの知識が必要

Promise
アロー関数
await async

順にどのようなモノなのか、ざっくり説明していきます。

１．Promise（非同期通信を行うオブジェクト）

ではまず Promise について。

これは公式リファレンスだと、こういう説明がされてます。

Promise オブジェクトは非同期処理の最終的な完了処理（もしくは失敗）およびその結果の値を表現します。

引用元　：　Promise - JavaScript | MDN

このPromise は fetch API でも使われていて、 then() はPromise から受け継いだ感じらしいです。

そこらへんは詳しくないので、ここでは省略します。

たとえば 1.5秒後に非同期で何かするコードを書くなら、こういう感じです。

▼ とても簡単な Promise のコード例

/// 1.5秒後にメッセージを返すPromise
var getMsg = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve('Hello!!'); 
  }, 1500);
});

getMsg.then(function(msg){  
  /// ここが resolve に対応する
  console.log('msg : ', msg);
}, function(){
  /// ここが reject に対応する
  /// 失敗したときの処理
});

/// 1.5秒後にメッセージを返すPromise

var getMsg = new Promise((resolve, reject) => {

setTimeout(function(){

resolve('Hello!!');

}, 1500);

});

getMsg.then(function(msg){

/// ここが resolve に対応する

console.log('msg : ', msg);

}, function(){

/// ここが reject に対応する

/// 失敗したときの処理

});

上コードの resolve が処理が正しく行われたときに実行したコールバック、
そして reject が通信エラー時とかの失敗時に実行したいコールバック。

この非同期処理できる Promise が sleep関数実装の１つめのカギです。

２．アロー関数（functionの代替式的なの）

２つめはアロー関数について

▼ アロー関数のMDNリファレンスでの説明

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

引用元　：　アロー関数 - JavaScript | MDN

たとえば () => {} は一番単純なアロー関数の例。

もちろん「通常の function 式の代替構文」なので、 function による置き換えも可能です。

ただしアロー関数は次の利点があるので、使えると便利。

コードを function式より短くできる
変数をいちいち bind する手間がなくなる

スマートにコードを書くならコチラを使う方がいいかもしれません。

MDNリファレンスでも Promise の説明はアロー関数なので。

３．await async（同期・非同期の制御）

最後は await , async について。

これは関数定義の前につけ、動作を定義するためのキーワードです。

async
これを関数の前につけると非同期関数（＝他の処理を待たない）になる。
たとえば async function hoge(){...} みたいな感じ
await
これは非同期関数の中で使い、それを使うとローカルスコープで処理をブロックする。
たとえば await function fuga() みたいな感じ

文字通り　async ＝「非同期」、 await = 「待つ」　という意味。

この２つが sleep関数の実装でかなり重要な役割をもってきます。

sleep関数を実装する手順＆コード例

では具体的なsleep関数の実装手順について。

今紹介した Promise と await async を使えば簡単にできます。

その手順は次の２ステップ

１．まずミリ秒まで待てる sleep関数を作成

▼ こんな感じで sleep関数作ってみた

/// アロー関数を使う場合
var sleep 
  = time => new Promise(resolve => setTimeout(resolve, time));
  
/// 普通の関数ならこう書き変え可能
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

/// アロー関数を使う場合

var sleep

= time => new Promise(resolve => setTimeout(resolve, time));

/// 普通の関数ならこう書き変え可能

function sleep(ms) {

return new Promise(resolve => setTimeout(resolve, ms));

}

アロー関数が分かりにくい場合は、普通の function式でも代替可能です。

２．ウェイトしたい箇所を async で囲み、sleep関数実行

▼ 例えばコード内での書き方例

(async () => {
  for(var i = 0; i < 100; i++){
    /// １秒間だけ待つ
    await sleep(1000);
    console.log('sleep '+(i+1)+' times');
  }
})();

(async () => {

for(var i = 0; i < 100; i++){

/// １秒間だけ待つ

await sleep(1000);

console.log('sleep '+(i+1)+' times');

}

})();

上コードを実行すると、１秒おきに 'sleep is done' が表示されるはず

▼ 実際のコンソールの様子

同期的になるのは async で囲った部分だけ。

だから sleep(1000) の影響はその外には影響を及ぼしません。

ちなみに少し応用

次みたく片方は500ミリ秒おき、もう片方は300ミリ秒おきみたいな処理もできます。

▼ 0.5秒と 0.3秒おきに２つのタスクを実行するコード例

(async () => {
  for(var i = 0; i < 1000; i++){
    await sleep(1);
    console.log('sleep-1 '+(i+1)+' times');
  }
})();

(async () => {
  for(var i = 0; i < 1000; i++){
    await sleep(3);
    console.log('sleep-2 '+(i+1)+' times');
  }
})();