memo-pad’s blog

自分のためのメモをまとめています。ここに書いてある内容については責任は負いません。全て自己責任でお願いします。

javascriptのコールバック関数

javascriptの勉強はじめました。

いきなりコールバック関数ってなんじゃこれという感じになったので、今わかってる範囲内でメモ。

下記のように、test1のcallback(‘aaa’, ‘bbb’)がtest2の引数a,bにそれぞれ渡される挙動をするのがコールバック関数。

function test1(callback) {
    callback('aaa', 'bbb');
}

function test2(a, b) {
    console.log(a + "," + b);
}

test1(test2);

使い所としては、非同期の場合に処理の順序を制御する場合など。

例えばこれだと出力はfugaとなり想定通りなものとなる。

function test1(hoge) {
    hoge = 'fuga';
    return hoge;
}

function test2(hoge) {
    console.log(hoge);
}

var hoge = 'hoge';
test2(test1(hoge));

出力:fuga

一方で非同期なため、下記のようにtest1で時間をかけてしまうとfugaに文字列がセットされる前にtest2が走ってしまいundefinedとなってしまう。

function test1(hoge) {
    setTimeout(function () {
        hoge = 'fuga';
        return hoge;
    }, 1000);
}

function test2(hoge) {
    console.log(hoge);
}

var hoge = 'hoge';
test2(test1(hoge));

出力:undefined

そこでコールバック関数を使って制御をしてあげるとちゃんと出力がfugaとなる。

function test1(callback) {
    var hoge = 'hoge';
    setTimeout(function () {
        hoge = 'fuga';
        callback(hoge)
    }, 1000);
}

function test2(hoge) {
    console.log(hoge);
}

test1(test2);

出力:fuga

それにしても、時間かけるようにするためsleep関数とかないかなーと思ったのですが、javascriptってsleep関数ないのですね……