コールバック関数/JavaScript

JavaScriptでは予め関数を指定し、後でコールバック(実行)させる事が出来ます。

本項では、コールバック関数について説明します。

コールバック関数の使い方

 コールバック関数とは、関数の引数として渡す関数の事です。後で実行する関数を引数として指定します。

コールバック関数の説明

 func2がコールバック関数です。イメージは、電話のコールバックと同じです。後で連絡する連絡先を指定します。

電話のコールバック

 以下は、利用例です。

【コールバック関数の例】
<script>
function func1(callback) {
    alert("クリックされました");
    callback();
    alert("処理完了");
}

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

func1(func2);
</script>

 赤字部分で、func1の引数としてコールバック関数func2を渡しています。このため、青字部分でコールバック関数としてfunc2が呼び出されます。func2が終わるとfunc1に戻ります。

 つまり、「クリックされました」→「スペードのAです」→「処理完了」の順で表示されます。

コールバック関数のメリット

 コールバック関数のメリットは、呼び出し元で分岐先を決める事が出来る点です。

【コールバック関数を利用して処理を分ける】
<script>
function func0() {
    var x = Math.ceil( Math.random() * 2 );
    if ( x == 1 ) {
        func1(func2);
    } else {
        func1(func3);
    }
}

function func1(callback) {
    alert("計算終了です");
    callback();
}

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

function func3() {
    alert("クラブのAです");
}

func0();
</script>

 緑字でfunc0を実行します。赤字分部でfunc0からfunc1を呼び出す際、func2を引数にしています。青字部分ではfunc3を引数にしています。

 このため、xが1であれば「計算終了です」が表示された後、func2が実行されて「スペードのAです」と表示されます。xが2であれば「計算終了です」が表示された後、func3が実行されて「クラブのAです」と表示されます。

コールバック関数のメリット

 xはfunc0内だけで使えるローカル変数です。func1では使えないため、引数等で渡さない場合はfunc1で条件分岐してfunc2とfunc3を呼び出す事は出来ません。

コールバック関数が使えない場合

 つまり、呼び出し元のfunc0で、次の実行先(func2や3等)を決める必要がある時にコールバック関数を使うメリットがあります。

コールバック関数に引数を渡す

 コールバック関数を指定する時、func1(func2());等と記述すると、正常に動作しません。func1(func2);と記述する必要があります。このため、コールバック関数に引数を渡す時はfunc1(func2(2));等と記述出来ません。

 コールバック関数に引数を渡す例を以下に示します。

【コールバック関数に引数を渡す例】
<script>
function func1(callback,x) {
    alert("クリックされました");
    callback(x);
    alert("処理完了");
}

function func2(x) {
    alert(x);
}

func1(func2,"スペードのAです");
</script>

 赤字部分はfunc1の引数です。青字のxで受け取っています。緑字でコールバックする時、xを引数として渡しています。つまり、一旦はfunc1に引数として渡し、func1の中でコールバック関数の引数として渡します。

イベント処理でのコールバック関数

 「イベント処理」で説明したイベントリスナーでもコールバック関数を使っています。

【イベントリスナー】
<div>
<image src="image/trump/11.png" alt="スペードA" id="image1">
</div>

<script>
function func1() {
    alert("スペードのAです")
}

var x = document.getElementById("image1");
x.addEventListener("click", func1);
</script>

 赤字のイベントリスナーは、画像をクリックするまで待機する(リスナー)処理を行います。引数としてfunc1を渡していますが、これがコールバック関数です。ハンドラとしてコールバック関数を使っています。

 メソッドであるaddEventListener(=関数)を呼び出す際、クリックイベントが発生したらfunc1にコールバックするよう指定しています。

 もし、x.addEventListener("dbclick", func2);を実行した場合、ダブルクリックが発生した時はfunc2にコールバックします。つまり、リスナーの呼び出し元でイベントタイプ(クリックやダブルクリック)を条件とし、異なる分岐先(コールバック関数)を指定出来ます。

次のページ非同期処理

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