1. ホーム
  2. ジャバスクリプト

[解決済み】jQueryはコールバックに多くのパラメータを渡します。

2022-04-04 06:06:10

質問

jQueryのコールバック関数に、より多くのデータを渡す方法はありますか?

2つの関数があり、コールバックを $.post 例えば、AJAX呼び出しの結果のデータと、いくつかのカスタム引数を渡すようにします。

function clicked() {
    var myDiv = $("#my-div");
    // ERROR: Says data not defined
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
    // ERROR: Would pass in myDiv as curData (wrong)
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
}

function doSomething(curData, curDiv) {

}

AJAXコールから返される結果だけでなく、コールバックに独自のパラメータを渡すことができるようにしたいです。

どのように解決するのですか?

解決策は、クロージャによる変数の束縛です。


より基本的な例として、コールバック関数を受け取り、コールバック関数を呼び出す関数と、コールバック関数の例を紹介します。

function callbackReceiver(callback) {
    callback("Hello World");
}

function callback(value1, value2) {
    console.log(value1, value2);
}

これはコールバックを呼び出し、1つの引数を与えています。ここで、追加の引数を与えたいので、コールバックをクロージャで囲みます。

callbackReceiver(callback);     // "Hello World", undefined
callbackReceiver(function(value) {
    callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});

あるいは、もっとシンプルに ES6アローファンクション :

callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"


あなたの具体的な例に関しては、私はまだ .post 関数がありますが、ドキュメントをざっと読んだところ、コールバックは 関数ポインタ を以下のシグネチャで指定します。

function callBack(data, textStatus, jqXHR) {};

したがって、解決策は次のようになると思います。

var doSomething = function(extraStuff) {
    return function(data, textStatus, jqXHR) {
        // do something with extraStuff
    };
};

var clicked = function() {
    var extraStuff = {
        myParam1: 'foo',
        myParam2: 'bar'
    }; // an object / whatever extra params you wish to pass.

    $.post("someurl.php", someData, doSomething(extraStuff), "json");
};

何が起きているのか?

最後の行に doSomething(extraStuff) 呼び出される であり、その呼び出しの結果は 関数ポインタ .

なぜなら extraStuff への引数として渡されます。 doSomething のスコープ内である。 doSomething 関数を使用します。

いつ extraStuff の返された無名内部関数で参照されます。 doSomething は、クロージャによって外側関数の extraStuff の引数になります。このことは doSomething が返されました。

上記をテストしたわけではありませんが、この24時間の間に非常に似たようなコードを書き、説明したように動作しました。

もちろん、個人の好み/コーディング基準に応じて、単一の 'extraStuff' オブジェクトではなく、複数の変数を渡すことができます。