JavaScript で X 秒を待つ

1. JavaScript で X 秒待つには setTimeout() を使用する
2. JavaScript で X 秒間待つには、promises と async/await を使用する
3. for ループを使って JavaScript に同期した delay 関数を実装する

このチュートリアルでは、JavaScript で実行を続ける前に x 秒待つ方法を説明します。スレッドを x 秒間ブロックする関数 delay(seconds) を実装します。また、この遅延のための複数の実装手法についても説明します。

関数 delay の実装といえば、最も広く使われているのは非同期の setTimeout() です。

JavaScript で X 秒待つには setTimeout() を使用する

非同期の setTimeout() メソッドはコールバック関数を引数に取り、入力時間が経過した後にその関数を実行する高階関数の一つです。パラメータに与えられる時間は ms 単位です。

console.log('I am the first log');

setTimeout(function() {
  console.log('I am the third log after 5 seconds');
}, 5000);

console.log('I am the second log');

出力：

I am the first log
I am the second log
I am the third log after 5 seconds

JavaScript で X 秒間待つには、promises と async/await を使用する

非同期コンテキストで遅延関数を実装する方法の一つに、async/await の概念と promises の概念を組み合わせる方法があります。内部に新しい promise を返す遅延関数を作成し、その関数を待ち時間を指定して setTimeout() メソッドを呼び出します。その後、任意の非同期コンテキスト内で delay 関数を好きなように呼び出すことができます。

function delay(n) {
  return new Promise(function(resolve) {
    setTimeout(resolve, n * 1000);
  });
}

async function myAsyncFunction() {
  // Do what you want here
  console.log('Before the delay')

      await delay(5);

  console.log('After the delay')
  // Do what you want here too
}

myAsyncFunction();

出力：

Before the delay
After the delay

以下の例のように、ECMAScript 6 の矢印構文を使って遅延関数を最適化することもできます。

const delay = (n) => new Promise(r => setTimeout(r, n * 1000));

for ループを使って JavaScript に同期した delay 関数を実装する

上記の delay() 関数を利用するための非同期コンテキストがないか、あるいは setTimeout() 関数を利用したくないとします。そのような場合は、通常の for ループと Date() クラスを用いて synchronous 遅延関数を実装することで時間を計算することができます。

この関数の実装は非常に単純です。CPU を必要な時間だけビジー状態にしておくだけです。これは、経過時間を計算して待ち時間と比較することで、その後も実行を続けることができます。

function syncDelay(milliseconds) {
  var start = new Date().getTime();
  var end = 0;
  while ((end - start) < milliseconds) {
    end = new Date().getTime();
  }
}

console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')

出力：

Before the delay
After the delay