sleep処理
JavaScriptの処理を一時的に停止したい時があります。
本ページでは、sleep処理について説明します。
setTimeout
JavaScriptでは、sleep(10);などとして10秒処理を停止することができません。しかし、10秒すると処理を行い、その間他の処理も平行して行うといった非同期処理はできます。
setTimeoutは、非同期で指定した時間待ってから処理を行います。以下は、例です。
function func1() { alert("10秒経ちました"); } setTimeout(func1,10000); alert("すぐ表示");
10000は、待機時間です。単位はms(1秒の1/1000)です。このため、10秒待った後にfunc1が呼び出されて、「10秒経ちました」とアラートが表示されます。
その間、非同期に次の処理も進むため、先に「すぐ表示」のアラートが表示されます。
setTimeout(func1,10000,"10秒経ちました")などと、引数を渡すこともできます。この時、func1(x)などとして受け取れば、関数内で値が使えます。
これを利用して、途中で処理を分岐させることができます。以下は、例です。
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は、一定時間ごとにコールバック関数を呼び出します。その間、他の処理が非同期で進みます。以下は、例です。
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チェーン、非同期処理との組み合わせ方法などを説明しています。