非同期処理/JavaScript

JavaScriptは、イベントリスナー等によってイベント待ち状態が複数発生します。これらは、上から順番にハンドラを処理するのではなく、イベント発生順に処理します。

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

非同期処理の概要

 イベントリスナーによってイベント発生を待っている間、次の処理が行われない訳ではありません。それぞれの処理は非同期(別々)で進みます。

非同期処理の概要

 例えば以下を実行すると、ページが表示された時に「スペードのAです」が表示され、画像をクリックすると「クリックされました」と表示されます。

【非同期処理】
<div>
<image src="image/trump/11.png" alt="スペード" id="image1">
</div>

<script>
function func1() {
    alert("クリックされました");
}

var x = document.getElementById("image1");
x.addEventListener("click", func1, false);
alert("スペードのAです");
</script>

 上から処理すると、緑字部分のイベントリスナーでクリックが発生するまで待ちになってしまいますが、非同期で処理が進むため、クリックしなければ赤字分部が先に実行されます。

コールバック関数の利用

 非同期処理で呼び出された関数から、更に別の関数を呼び出す例です。

【非同期処理でのコールバック関数利用】
<div>
<image src="image/trump/11.png" alt="スペード" id="image1">
</div>

<script>
function func1(callback) {
    alert("クリックされました");
    callback();
}

function func2() {
    alert("スペードのAです");
}

var x = document.getElementById("image1");
x.addEventListener("click", function() {func1(func2);}, false);
</script>

 上記は、赤字部分でコールバック関数が呼び出されるため、画像をクリックした時は「クリックされました」の後に「スペードのAです」と表示されます。これだけであれば、callback();の所をコールバック関数を使わずにfunc2();と記述しても同じです。

 コールバック関数を使うメリットは、イベントの内容によって呼び出す関数を変えれる点です。

【複数イベント時のコールバック関数利用】
<div>
<image src="image/trump/11.png" alt="スペードA" id="image1">
<image src="image/trump/31.png" alt="ハートA" id="image2">
</div>

<script>
function func1(callback) {
    alert("クリックされました");
    callback();
}
function func2() {
    alert("スペードのAです");
}
function func3() {
    alert("ハートのAです");
}

var x = document.getElementById("image1");
var y = document.getElementById("image2");
x.addEventListener("click", function() {func1(func2);}, false);
y.addEventListener("click", function() {func1(func3);}, false);
</script>

 2つの画像がクリックされた時に実行される関数は赤字部分のfunc1で共通ですが、青字部分はfunc2と3で異なる関数がコールバックされます。このため、以下のように動作します。

スペードA ハートA

 スペードのAをクリックすると、「クリックされました」の次に「スペードのAです」が表示され、ハートのAをクリックすると「クリックされました」の次に「ハートのAです」と表示されます。

非同期処理イベントリスナーとコールバック関数の組み合わせ

 このように、コールバック関数を使うとイベント発生時に途中まで同じ処理を行い、イベントの内容によって異なる関数を呼び出す事が出来ます。今回は、非同期処理での例なので、これらの処理を別々に進める事が出来ます。

次のページsleep処理

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