コールバックにパラメータを渡す

Question

コールバックの追加パラメータを渡す方法を理解しようとしています。これまで私は以下のコードを持っています。これまでのところ、これを達成するためにどのように

$("#refine_mp_type").change(function(){ 
    var mp_type = $(this).val(); 
    var country_id = $('#refine_country').val(); 
    var dropdown = $('#refine_grade').find('select'); 
    getMPTypeGrades(country_id, mp_type, populateGradesDropdown); 
}); 

function getMPTypeGrades(country_id, mp_type, callback){ 
    display_wait_dialog ("Please Wait", "Loading grades..."); 
    $.ajax(
    { 
     //do ajax 
    }) 
    .done(function(data){ 
     callback(data); 
    }) 
    .fail(//do something) 
    .always(//do something); 
} 

populateGradesDropdown(data){ 
    //populate the dropdown with the returned data 
} 

私の考えは以下のとおりです。

1. 私は（グローバルスコープを汚染します）グローバルスコープにあるドロップダウン変数を設定し、それをそのようにアクセスすることができました。
2. 私はdropdown要素をgetMPTypeGrades関数に渡し、それをコールバック関数に渡すことができます。 （私は可能な限り一般的なようgetMPTypeGradesを維持したい。私は常にjQueryの要素を受け入れ、コールバックを渡すことになります場合、私は知りません。）

jQueryの要素と渡すための最善の方法は何ですかコールバックのパラメータとしてのAjaxレスポンス

Answer 1

あなたは、コールバック関数ドロップダウンをバインドすることができます。そして、

$("#refine_mp_type").change(function(){ 
    var mp_type = $(this).val(); 
    var country_id = $('#refine_country').val(); 
    var dropdown = $('#refine_grade').find('select'); 
    getMPTypeGrades(country_id, mp_type, populateGradesDropdown.bind(null, dropdown)); 
}); 

populateGradesDropdown(dropdown, data){ 
    //populate the dropdown with the returned data 
} 

Answer 2

はjQuery DeferredとjQuery whenを使用してみてください。基本的に、保留状態の遅延オブジェクトを作成し、呼び出し元に返します。 jQuery whenは、遅延オブジェクトが解決または拒否された場合にのみコールバック関数を実行します。あなたのAjaxリクエストが終了すると、.resolveまたは.rejectが呼び出されます。これにより、呼び出し元のコールバックメソッドがトリガーされます。

私はこのコードをテストしていませんが、多かれ少なかれ動作します。

$("#refine_mp_type").change(function() { 
    var mp_type = $(this).val(); 
    var country_id = $('#refine_country').val(); 
    var dropdown = $('#refine_grade').find('select'); 
    $.when(getMPTypeGrades(country_id, mp_type)).then(function(result) { 
     //populate dropdown 
    }); 
}); 

function getMPTypeGrades(country_id, mp_type) { 
    var def = $.Deferred(); 
    display_wait_dialog ("Please Wait", "Loading grades..."); 
    $.ajax(
    { 
     //do ajax 
    }) 
    .done(function(data) { 
     def.resolve(data); 
    }) 
    .fail(function(err) { 
     def.reject(err); 
    }) 
    .always(function() { 
     hide_wait_dialog(); 
    }); 
    return def; 
} 

Answer 3

ではなく（コールバックの「ピラミッド」コードを作成することができます）コールバックを渡して、あなただけのgetMPTypeGradesに繰延べAjaxオブジェクトを返す必要があります。その後、ちょうど変更ハンドラ内標準.done()/.then()機能を使用することができます。

$("#refine_mp_type").change(function(){ 
    var mp_type = $(this).val(); 
    var country_id = $('#refine_country').val(); 
    var dropdown = $('#refine_grade').find('select'); 
    getMPTypeGrades(country_id, mp_type).then(populateGradesDropdown); 
}); 

function getMPTypeGrades(country_id, mp_type){ 
    display_wait_dialog ("Please Wait", "Loading grades..."); 
    return $.ajax(
    { 
     //do ajax 
    }) 
    .fail(//do something) 
    .always(//do something); 
} 

populateGradesDropdown(data){ 
    //populate the dropdown with the returned data 
} 

Answer 4

あなたは、コールバック関数のボディにオリジナルのドロップダウン変数を参照することができます：あなたが最初のように `dropdown`を設定するとき

var dropdown = /*whatever*/; 
getMPTypeGrades(country_id, mp_type, function(data) { 
    populateGradesDropdown(data, dropdown); 
}); 

$.ajax({ 
}).done(function(data){ 
    callback(data); 
}) 

function populateGradesDropdown(data, dropdown){ 
    alert("data=" + data); 
    alert("dropdown=" + dropdown); 
}