非同期処理

JavaScriptは、上から順番に実行されるだけではありません。

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

非同期処理とは

非同期処理とは、処理が終わる前に次の処理を開始して、平行して複数の処理が進むことです。

処理が終わってから次の処理が開始される場合は、同期処理と呼ばれます。

同期処理と非同期処理の違い

非同期処理では、上から順番に処理が終わる訳ではないため、先に開始した処理が後に終わることもあります。

次からは、非同期処理の例を挙げて説明します。

setTimeout

setTimeoutは、一定時間待機した後にコールバック関数を呼び出します。待機している間は、他の処理が非同期で進みます。以下は、例です。

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

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

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

setInterval

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

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

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

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

キャンセル

setTimeoutもsetIntervalも、途中でキャンセルできます。以下は、例です。

【setTimeoutのキャンセル例】
<input type="button" value="停止" id="test">

<script>
function func1() {
  alert("10秒経ちました");
}
function func2() {
  clearTimeout(timeID);
}

const timeID = setTimeout(func1,10000);
const x = document.querySelector("#test");
x.addEventListener("click",func2);
</script>

const timeIDで、タイムアウトIDを取得しています。clearTimeoutでタイムアウトIDを指定することで、キャンセルできます。

このため、上記は10秒経過する前にボタンをクリックすると、アラートは表示されません。

また、setIntervalのキャンセル方法も同じです。setTimeoutの部分をsetIntervalに書き換えると、10秒ごとにアラームが表示されますが、ボタンをクリックするとキャンセルされます。

イベントリスナー

イベントリスナーも、非同期処理です。イベントが発生するまで待機しますが、その間他の処理は非同期で進みます。以下は、イベントリスナーの利用例です。

【イベントリスナーの利用例】
<input type="button" value="実行" id="test">

<script>
function func1() {
  alert("テスト");
}

const x = document.querySelector("#test");
x.addEventListener("click",func1);
alert("すぐ表示");
</script>

x.addEventListener部分がイベントリスナーです。クリックするまで待機しますが、他の処理は進むため、先に「すぐ表示」のアラートが表示されます。ボタンがクリックされると、「テスト」のアラートが表示されます。

非同期関数

非同期関数は、タイマーやイベントなど関係なく、非同期で処理を進める時に使います。非同期関数は、async functionで宣言します。以下は、例です。

【非同期関数の利用例】
async function func1() {
  await alert("テスト1");
  alert("テスト2");
}

func1();
alert("テスト3");

awaitは、右に記述した処理が終わるまで、次の処理を開始しません。つまり、「テスト1」のアラートが表示されて、「OK」ボタンをクリックするまで、alert("テスト2");は処理が開始されないということです。その間、非同期に関数外の処理(今回の例ではalert("テスト3"))が進みます。

もし、非同期関数でない場合、上記は「テスト1」、「テスト2」、「テスト3」の順にアラートが表示されますが、上記では「テスト2」より「テスト3」の方が先に表示されます。

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

関連ページ

JavaScript基礎「sleep処理
JavaScriptで処理を一時的に停止する方法を説明しています。