sleep処理/JavaScript

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

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

setTimeout

 以下のように、10秒待ってから次の処理を行いたいとします。

sleep処理

 10秒待つ処理をsleep(10);等と記述出来ればいいのですが、JavaScriptでは命令文がありません。

 但し、setTimeoutを使って一定時間経過後に関数を呼び出す事は出来ます。

setTimeoutの概要

 以下は利用例で、10秒経過後にアラートを表示します。

【setTimeoutの利用例】
<script>
function test_time() {
    alert("10秒経ちました");
}
setTimeout(test_time,10000);
</script>

 赤字部分は呼び出す関数です。青字部分は待ち時間です。ミリ秒単位で指定します。

 フォームのボタンから上記を呼び出すようにすると、以下のように動作します。

 ボタンをクリックして10秒後にアラートが表示されるのが確認出来ます。

setInterval

 setIntervalを使うと、一定時間間隔で関数を繰り返し呼び出す事が出来ます。

【setIntervalの利用例】
<script>
function test_interval() {
    alert("10秒経ちました");
}
setInterval(test_interval,10000);
</script>

 赤字部分は呼び出す関数です。青字部分は待ち時間です。ミリ秒単位で指定します。使い方はsetTimeoutと同じで、繰り返すかどうかだけの違いです。

コールバック関数の利用

 setTimeoutもsetIntervalも非同期で処理が進みます。例えば、setTimeoutの次にalert("処理完了");が記述されていると、その処理が先に行われます。

setTimeoutでの非同期処理

 「10秒経ちました」の後に「処理完了」を表示したい時は、alert("処理完了");をtest_time関数の中に含めます。又、途中から処理を分岐させたい時は、コールバック関数が使えます。

【setTimeoutでコールバック関数利用例】
<script>
function test_time(callback) {
    callback();
    alert("処理完了");
}
function func1() {
    alert("5秒経ちました");
}
function func2() {
    alert("10秒経ちました");
}

setTimeout(function() {test_time(func1);},5000);
setTimeout(function() {test_time(func2);},10000);
</script>

 赤字部分は、無名の関数式を利用してコールバック関数func1とfunc2を引数として渡しています。青字部分でコールバック関数が呼び出されてfunc1とfunc2に処理が分岐します。

 func1とfunc2は非同期処理されます。「5秒経ちました」→「処理完了」、「10秒経ちました」→「処理完了」は順番に表示され、非同期処理ではありません。

非同期処理中の処理順

 因みに、func1を引数として渡すためsetTimeout(test_time(func1),5000);と記述しても正常に動作しません。test_time自体がsetTimeoutから呼び出されるコールバック関数で、引数が使えないためです。他の記述方法としては、以下もあります。

【setTimeoutでコールバック関数利用例(パラメタ指定】
<script>
function test_time(callback) {
    callback();
    alert("処理完了");
}
function func1() {
    alert("5秒経ちました");
}

setTimeout(test_time,5000,func1);
</script>

 赤字でコールバック関数を渡しています。

 こちらの方が推奨されますが、InternetExplorer9以前では動作しません。FireFox、Chrome、Edge等では動作します。

キャンセル

 setTimeoutの動作をキャンセルするためには、clearTimeoutを使います。

【setTimeoutのキャンセル】
<script>
function test_time() {
    alert("10秒経ちました");
}
function func1() {
    clearTimeout(timeID);
}

var timeID = setTimeout(test_time,10000);
addEventListener('click',func1,false);
</script>

 赤字部分はsetTimeoutを実行すると共に、timeIDを取得しています。青字部分は、取得したtimeIDを利用してキャンセルしています。動作としては、ページが表示されて10秒すると「10秒経ちました」と表示されますが、その前にページ内をクリックすると、イベントリスナーでfunc1が呼ばれてキャンセルされるため、何も表示されません。

 setIntervalもclearIntervalを使ってキャンセル出来ます。

【setIntervalの利用例】
<script>
function test_interval() {
    alert("10秒経ちました");
}
function func1() {
    clearTimeout(timeID);
}

var intervalID = setInterval(test_interval,10000);
addEventListener('click',func1,false);
</script>

 使い方は、clearTimeoutと同じです。

前のページ非同期処理

  • このエントリーをはてなブックマークに追加