JSにおけるコールバックの理解

<スパン 前文

今日、弟からコールバック関数について聞かれたので、少し説明したところ、無駄に話すわけにはいかないと思い、ごく基本的なことですが、書いておくことにしました。

<スパン はじめに

まずは英語の紹介から

コールバックとは、他の関数の引数として渡され、その親関数が完了した後に実行される関数のことです。

ここでは、jsでの説明のみです。

スタート

文字通り、コールバックとは、ある関数を呼び出すことです。では、まずそのコールバックの手順を理解することから始めましょう。関数aは1つの引数を持ち、その引数は関数bです。関数aが関数bの実行を終了するとき、その処理をコールバックと呼びます。

実は中国語ではとても簡単で、コールバック、コールバックとは、呼び戻すという意味なんです。関数aが終わったら、関数bをコールバックするんだ。

現実的な例を挙げると、デートの後、恋人を家に送り、別れるときに、"家に帰ったらメッセージを送ってね、心配だから"と言わなければなりませんね。若い人、楽しみですね。

実はこれ、コールバックなんです。関数b（恋人にメッセージを送ってもらう）を恋人に残し、恋人が帰宅し、帰宅するためのアクションは関数aで、彼女が先に帰宅し、関数aが実行された後に関数bが実行され、メッセージが届きます。

ここではっきりさせておきたいのは、関数bは関数aに引数として渡すものなので、関数bはコールバック関数と呼ばれるということです。

という疑問をお持ちの方もいらっしゃるかもしれません。 関数aの内部から関数bを呼び出すことはできないのですか？はい、できます。私はそれを理解しようとしているのです。

パズルを解く :関数aの中で直接呼び出すと、コールバック関数が制限されます。しかし、関数を引数として使うと、a(b)のときに関数bがコールバック関数になり、今度はa(c)もできる、関数cがコールバック関数になる、というメリットがあるのです。関数a(){... ;b();}のように書くと、変数の柔軟性が失われるのです。

最後に実行できるコードです。

function a(callback)
{   
    alert("I am the parent function a!");
    alert("Callback function");
    callback();
}
function b(){
alert("I am the callback function b");
  
}
function c(){
alert("I am the callback function c");
  
}
  
function test()
{
    a(b);
   a(c);
}

<スパン コード例をもとに理解を深める

質問です。

今、次のように定義された関数があります。
関数 A(a,callback){ <未定義
....
}
関数B(){ <未定義
....
}
そうすると、次のような呼び出しができるようになります。
A(a,B);でコールバックを実装します。
ここで、Bにパラメータcを渡したい、つまり、以下のようなことを実現したい。A(a,B(c));; のようにしたいのですが、どのようにすればよいのでしょうか？

function A(a,callback){ 
var b=callback; 
alert(a+b); 
} 
function B(c){ 
return (-c); 
} 
A(4,B(3))

jqueryのajaxリクエストでよくあるシナリオを元に、別の例を書くこと。

jQueryのajaxメソッドをラップしてみました。

function doAjax(u,param,callback){
      $.ajax({
            type:'POST',
            url:u,
            data:param,
            success:callback
      });
}
 
function showAlert(data){
     alert(data);
}
 

例えば、doAjax("url","id=1",showAlert)をこのように呼びます。
$.ajaxは成功後にshowAlertにデータを返し、問題なく表示されます。
しかし、showAlertにもう一つパラメータを渡したいときは、どう書けばいいのでしょうか？
doAjax("server.php","id=12&type=1",showAlert("hi",data)) と書いたり、上記の success:callback を success: callback(msg,data) として書いても明らかにうまくいかないのでどうしたらいいでしょうか？

実際には、それは非常に単純な、多くのメソッドは、コールバック関数を定義されている、コールバック関数も関数である、つまり、渡す方法に関係なく、ちょうど関数型にする必要がありますすることができます。それは次のように書かれている方法です。

Way 1.
doAjax(parameter1,parameter2,function(request,opts){
         callback(request,opts,agrs);
 });
function callback(request,opts,args){
               
};
Way 2.
var args=N;
doAjax(parameter1,parameter2,function(request,opts){
       var X=N;
       Callback function code block...
       Almost the same as above, depending on the personal coding style choice.     
});

親関数からコールバック関数に渡される別の例を見てみましょう。

function e(m,n,Callback){  
    var d = m+n;  
    alert("An argument generated from the parent function e will be passed to the callback function , and this argument is:"+d);  
     
    // write the function you want to call here - the arguments should be correct  
    Callback(d);   
}  
function callback(data){  
        alert("I am the callback function, my name is:callback ,I receive the parameters from the parent function, the parameters are:"+data);   
}
e(1,2,callback)  

最後に

お読みいただきありがとうございました。また、問題点などございましたら、お気軽にご指摘ください。