JavaScriptでn秒間待機する方法（sleep処理）

投稿日 2020/07/31 更新日 2020/12/15

n秒待機する（ES2017対応async/await）

// ミリ秒間待機する
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function main() {
  console.log('start');
  await sleep(1*1000);

  console.log(0);
  await sleep(1*1000);

  console.log(1);
  await sleep(1*1000);

  for (var i=2; i<5; i++) {
    console.log(i);
    await sleep(1*1000);
  }

  console.log('end');
};
main();

async/await構文が使用できるのであれば、これで決まりです。

n秒待機する（ES2015対応Generator）

// ミリ秒間待機する
function sleep(ms, generator) {
  setTimeout(() => generator.next(), ms);
}

var main = (function*() {
  console.log('start');
  yield sleep(1*1000, main);

  console.log(0);
  yield sleep(1*1000, main);

  console.log(1);
  yield sleep(1*1000, main);

  for (var i=2; i<5; i++) {
    console.log(i);
    yield sleep(1*1000, main);
  }

  console.log('end');
})();
main.next();

ジェネレータ関数を利用した処理です。コードはきれいですが、使用できるかどうかは、対応環境次第です。

n秒待機する（ES2015対応Promise）

// ミリ秒間待機する
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function main() {
  let promise = Promise.resolve();

  promise = promise.then(() => {
    console.log('start');
    return sleep(1*1000);
  }).then(() => {
    console.log('0');
    return sleep(1*1000);
  }).then(() => {
    console.log('1');
    return sleep(1*1000);
  });

  for (var k=2; k<5; k++) {
    // クロージャーを利用した変数の受け渡し
    promise = promise.then((function(i) {
      return () => {
        console.log(i);
        return sleep(1*1000);
      };
    })(k));
  }

  promise.then(() => {
    console.log('end');
  });
};
main();

Promiseを利用した、メソッドチェーンによる処理です。forループなどの変数の受け渡しでクロージャーを利用した複雑な処理が必要になります。

Promiseは、ES2015(ES6)で追加された機能です。ですが、IEなどの古いブラウザでもpolyfillによるPromise対応が可能です。

n秒待機する（setTimeout）

// ミリ秒間待機する
function sleep(ms, func) {
  setTimeout(func, ms);
}

function main() {
  console.log('start');
  sleep(1*1000, function() {
    console.log('0');

    sleep(1*1000, function() {
      console.log('1');

      sleep(1*1000, function() {
        console.log('2');

        sleep(1*1000, function() {
          console.log('3');

          sleep(1*1000, function() {
            console.log('4');

            sleep(1*1000, function() {
              console.log('end');
            });
          });
        });
      });
    });
  });
};
main();

世にいうコールバック地獄です。関数の入れ子構造が積み重なり、コードがどんどんと読みにくくなっていきます。

n秒待機する（XMLHttpRequest）

// n秒間待機する
function sleep(n) {
  var request = new XMLHttpRequest();
  request.open('GET', '/sleep.php?n='+n, false);
  request.send(null);
}

function main() {
  console.log('start');
  sleep(1);

  console.log(0);
  sleep(1);

  console.log(1);
  sleep(1);

  for (var i=2; i<5; i++) {
    console.log(i);
    sleep(1);
  }

  console.log('end');
};
main();
sleep.php<?php sleep($_GET['n']);

サーバ側の待機処理を利用した、同期処理です。ただし、通信環境次第では、待機時間は想定より長くなる可能性があります。また、サーバ側にリクエストが無為に集中する問題もあります。採用すべきではありません。

n秒待機する（ループ）

// ミリ秒間待機する
function sleep(ms) {
  var time = new Date().getTime() + ms;
  while (new Date().getTime() < time) {}
}

function main() {
  console.log('start');
  sleep(1*1000);

  console.log(0);
  sleep(1*1000);

  console.log(1);
  sleep(1*1000);

  for (var i=2; i<5; i++) {
    console.log(i);
    sleep(1*1000);
  }

  console.log('end');

};
main();

while文による無限ループを利用した待機処理です。この方法は、CPUの処理能力を無為に消費するため、採用すべきではありません。

補足

参考

コメント