非同期処理
JavaScriptは、上から順番に実行されるだけではありません。
本ページでは、非同期処理について説明します。
非同期処理とは
非同期処理とは、処理が終わる前に次の処理を開始して、平行して複数の処理が進むことです。
処理が終わってから次の処理が開始される場合は、同期処理と呼ばれます。
非同期処理では、上から順番に処理が終わる訳ではないため、先に開始した処理が後に終わることもあります。
次からは、非同期処理の例を挙げて説明します。
setTimeout
setTimeoutは、一定時間待機した後にコールバック関数を呼び出します。待機している間は、他の処理が非同期で進みます。以下は、例です。
function func1() { alert("10秒経ちました"); } setTimeout(func1,10000); alert("すぐ表示");
10000は、待機時間です。単位はms(1秒の1/1000)です。このため、10秒待った後にfunc1が呼び出されて、「10秒経ちました」とアラートが表示されます。
その間、次の処理が進むため、先に「すぐ表示」のアラートが表示されます。
setInterval
setIntervalは、一定時間ごとにコールバック関数を呼び出します。その間、他の処理が非同期で進みます。以下は、例です。
function func1() { alert("10秒経ちました"); } setInterval(func1,10000); alert("すぐ表示");
10000は、待機時間です。単位はms(1秒の1/1000)です。このため、10秒ごとに「10秒経ちました」とアラートが表示されます。
その間、次の処理が進むため、先に「すぐ表示」のアラートが表示されます。
キャンセル
setTimeoutもsetIntervalも、途中でキャンセルできます。以下は、例です。
<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で処理を一時的に停止する方法を説明しています。