Skip to main content
タイポ訂正
ソース リンク
WebSurfer
  • 857
  • 1
  • 4
  • 6

技術書や各々の解説ブログでは「コールバック関数は非同期処理」であると書かれています。

どこにどのように書いてあったのか分かりませんが、誤解があるのではと思います。

質問のコードは 100% 同期です (function a に書いた順番に上から下に実行される)。たとえ、function b の中で setTimeout を使って待つようなことをしても、function a では callback(); の完了を待って console.log('finish'); が実行されます。

function b を非同期にしたいということであれば、プロミスベースのメソッドにしてはいかがですか?

例えば以下のような感じです。

function a(callback) {
    console.log('a');
    callback();
    console.log('finish');
}

// a が b を呼ぶと、b は Promise オブジェクトを生成して即座に戻り値として返す。

// Promise コンストラクタの引数の executor 関数(下のコード例では (resolve) => { ... } 
// が該当)は new Promise の時点で自動的かつ即座に実行される。

// executor 関数内の setTimeout により 2 秒後に for ループが動いてコンソールに出力される

function b() {
    return new Promise((resolve) => {
        setTimeout(() => {
            for (let i = 0; i <= 5; i++) {
                console.log(i);
            }
            // function a で callback():; を await する場合はこれを呼び出さないと
            // 止まってしまうので注意
            resolve();
        }, 2000)
    });
}

a(b);

結果は:

画像の説明をここに入力

技術書や各々の解説ブログでは「コールバック関数は非同期処理」であると書かれています。

どこにどのように書いてあったのか分かりませんが、誤解があるのではと思います。

質問のコードは 100% 同期です (function a に書いた順番に上から下に実行される)。たとえ、function b の中で setTimeout を使って待つようなことをしても、function a では callback(); の完了を待って console.log('finish'); が実行されます。

function b を非同期にしたいということであれば、プロミスベースのメソッドにしてはいかがですか?

例えば以下のような感じです。

function a(callback) {
    console.log('a');
    callback();
    console.log('finish');
}

// a が b を呼ぶと、b は Promise オブジェクトを生成して即座に戻り値として返す。

// Promise コンストラクタの引数の executor 関数(下のコード例では (resolve) => { ... } 
// が該当)は new Promise の時点で自動的かつ即座に実行される。

// executor 関数内の setTimeout により 2 秒後に for ループが動いてコンソールに出力される

function b() {
    return new Promise((resolve) => {
        setTimeout(() => {
            for (let i = 0; i <= 5; i++) {
                console.log(i);
            }
            // function a で callback(): を await する場合はこれを呼び出さないと
            // 止まってしまうので注意
            resolve();
        }, 2000)
    });
}

a(b);

結果は:

画像の説明をここに入力

技術書や各々の解説ブログでは「コールバック関数は非同期処理」であると書かれています。

どこにどのように書いてあったのか分かりませんが、誤解があるのではと思います。

質問のコードは 100% 同期です (function a に書いた順番に上から下に実行される)。たとえ、function b の中で setTimeout を使って待つようなことをしても、function a では callback(); の完了を待って console.log('finish'); が実行されます。

function b を非同期にしたいということであれば、プロミスベースのメソッドにしてはいかがですか?

例えば以下のような感じです。

function a(callback) {
    console.log('a');
    callback();
    console.log('finish');
}

// a が b を呼ぶと、b は Promise オブジェクトを生成して即座に戻り値として返す。

// Promise コンストラクタの引数の executor 関数(下のコード例では (resolve) => { ... } 
// が該当)は new Promise の時点で自動的かつ即座に実行される。

// executor 関数内の setTimeout により 2 秒後に for ループが動いてコンソールに出力される

function b() {
    return new Promise((resolve) => {
        setTimeout(() => {
            for (let i = 0; i <= 5; i++) {
                console.log(i);
            }
            // function a で callback(); を await する場合はこれを呼び出さないと
            // 止まってしまうので注意
            resolve();
        }, 2000)
    });
}

a(b);

結果は:

画像の説明をここに入力

ソース リンク
WebSurfer
  • 857
  • 1
  • 4
  • 6

技術書や各々の解説ブログでは「コールバック関数は非同期処理」であると書かれています。

どこにどのように書いてあったのか分かりませんが、誤解があるのではと思います。

質問のコードは 100% 同期です (function a に書いた順番に上から下に実行される)。たとえ、function b の中で setTimeout を使って待つようなことをしても、function a では callback(); の完了を待って console.log('finish'); が実行されます。

function b を非同期にしたいということであれば、プロミスベースのメソッドにしてはいかがですか?

例えば以下のような感じです。

function a(callback) {
    console.log('a');
    callback();
    console.log('finish');
}

// a が b を呼ぶと、b は Promise オブジェクトを生成して即座に戻り値として返す。

// Promise コンストラクタの引数の executor 関数(下のコード例では (resolve) => { ... } 
// が該当)は new Promise の時点で自動的かつ即座に実行される。

// executor 関数内の setTimeout により 2 秒後に for ループが動いてコンソールに出力される

function b() {
    return new Promise((resolve) => {
        setTimeout(() => {
            for (let i = 0; i <= 5; i++) {
                console.log(i);
            }
            // function a で callback(): を await する場合はこれを呼び出さないと
            // 止まってしまうので注意
            resolve();
        }, 2000)
    });
}

a(b);

結果は:

画像の説明をここに入力