sleep処理

JavaScriptの処理を一時的に停止したい時があります。

本ページでは、sleep処理について説明します。

setTimeout

JavaScriptでは、sleep(10);などとして10秒処理を停止することができません。しかし、10秒すると処理を行い、その間他の処理も平行して行うといった非同期処理はできます。

setTimeoutは、非同期で指定した時間待ってから処理を行います。以下は、例です。

【setTimeoutの利用例】
function func1() {
  alert("10秒経ちました");
}
setTimeout(func1,10000);
alert("すぐ表示");

10000は、待機時間です。単位はms(1秒の1/1000)です。このため、10秒待った後にfunc1が呼び出されて、「10秒経ちました」とアラートが表示されます。

その間、非同期に次の処理も進むため、先に「すぐ表示」のアラートが表示されます。

setTimeout(func1,10000,"10秒経ちました")などと、引数を渡すこともできます。この時、func1(x)などとして受け取れば、関数内で値が使えます。

これを利用して、途中で処理を分岐させることができます。以下は、例です。

【setTimeoutで処理を分岐させる方法】
function func1(callback) {
  alert("テスト1");
  callback();
}
function func2() {
  alert("テスト2");
}
function func3() {
  alert("テスト3");
}

setTimeout(func1,10000,func2);
setTimeout(func1,10000,func3);

2つのsetTimeoutでfunc1を呼び出していますが、その次に呼び出すコールバック関数として、func2とfunc3を指定しています。このため、最初のsetTimeoutで「テスト1」の次に「テスト2」とアラートが表示されますが、次のsetTimeoutでは「テスト1」の次に「テスト3」とアラートが表示されます。

setInterval

setIntervalは、一定時間ごとにコールバック関数を呼び出します。その間、他の処理が非同期で進みます。以下は、例です。

【setIntervalの利用例】
function func1() {
  alert("10秒経ちました");
}
setInterval(func1,10000);
alert("すぐ表示");

10000は、待機時間です。単位はms(1秒の1/1000)です。このため、10秒ごとに「10秒経ちました」とアラートが表示されます。

その間、次の処理が進むため、先に「すぐ表示」のアラートが表示されます。

setIntervalでもsetTimeoutと同様に、setInterval(func1,10000,func2)などと、引数を渡せます。

非同期関数

setTimeout(func1,10000);の次にsetTimeout(func2,10000);と記述しても、20秒後にfunc2が実行される訳ではありません。非同期処理のため、1つめのsetTimeoutの10秒のカウントが始まった時点で、並行して2つめのsetTimeoutの10秒もカウントされ始めるためです。

最初の処理が完全に終わった後、次の処理を始めたい時は、非同期関数が使えます。非同期関数は、async functionで宣言します。以下は、例です。

【非同期関数の利用例】
function sleep(resolve) {
  setTimeout(function(){resolve();}, 10000);
}

async function func1() {
  await new Promise(sleep);
  alert("テスト1");
  await new Promise(sleep);
  alert("テスト2");
}

func1();

awaitは、右に記述した処理が終わるまで、次の処理を開始しません。つまり、sleepの処理が完了するまでalert("テスト1");は実行されません。このため、「テスト1」とアラートが表示されるのは、約10秒後です。

次の「テスト2」が表示されるのは、「テスト1」のアラートで「OK」をクリックした約10秒後です。非同期関数の中では、await new Promise(sleep);を実行するたびに10秒処理を停止することができるというわけです。

今回の例では、以下がポイントになります。

  • setTimeoutを使うことで、指定時間待つようにできる。
  • awaitを使うことで、指定時間待っている間に次の処理を進めないようにできる。
  • Promiseを使って、resolve(成功)の応答があるまで処理が完了とならないようにしている。

なお、awaitは非同期関数の中でだけ使えます。

関連ページ

JavaScript基礎「非同期処理
非同期処理として、setTimeout、setInterval、async functionやawaitなどの使い方、setTimeout、setIntervalのキャンセル方法を説明しています。
JavaScript基礎「Promiseの使い方
Promiseの書き方やPromiseチェーン、非同期処理との組み合わせ方法などを説明しています。