将参数传递给回调答案

【问题标题】：Passing parameters to a callback将参数传递给回调
【发布时间】：2016-12-09 07:03:08
【问题描述】：

我试图弄清楚如何传递我的回调附加参数。到目前为止，我有以下代码。

$("#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
}

到目前为止，我对如何实现这一点的想法是：

我可以将下拉变量设置为全局范围并以这种方式访问它（会污染全局范围）。
我可以将下拉元素传递给 getMPTypeGrades 函数，然后将其传递给回调函数。（我想让 getMPTypeGrades 尽可能通用。我不知道我是否会一直传递一个接受 JQuery 元素的回调。）

将 JQuery 元素和 Ajax 响应作为回调参数传递的最佳方法是什么？

【问题讨论】：

标签： javascript jquery callback

【解决方案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
}

【讨论】：

当您将dropdown 设置为绑定的第一个参数时，您可以在populateGradesDropdown 中使用this 关键字访问它。
是的，但是populateGradesDropdown 可能是通用函数并且可以使用它的上下文。但你是对的。

【解决方案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;
}

【讨论】：

链接很好，但对deffered做一点解释。

【解决方案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
}

【讨论】：

【解决方案4】：

可以在回调函数体中引用原下拉变量：

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);
}

【讨论】：