[解決済み】jQueryはコールバックに多くのパラメータを渡します。
質問
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' オブジェクトではなく、複数の変数を渡すことができます。
関連
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】 \u003C とは何ですか?