javascript - 代码内部变量问题

Question

我有一个如下所述的代码，请问如何使用以下代码获取 (getData) 的值：

var instanceArray = myGraph.getInstances(component)

我想myGraph.getInstances(component).getData会做，但它失败了

this.getInstances = function(component) {
    var getData = {};
        $.ajax({
            url: "/rpc/alerts2/commonObj_rpc.cfc?method=getInstances",
            data: {"component":component},
            type: "POST",
            async: true,
            success: function(data) {
                getData = $.parseJSON(data);
                console.log("hey");
                var $render_component_instance = $("#instances").empty();
                $("#instances").append($("<option />").val("all").text("All Instances (Summed)"));
                $.each(getData, function (cIndex, cItem){
                    var $instance = $("<option />").val(cItem.si_instance).text(cItem.si_label.toUpperCase());
                    $render_component_instance.append($instance);
                })
                $("#instances").multiselect("refresh");
            }
        });
};`

Answer 1

你不能，get是异步的。getInstances在 GET 完成之前返回，因此无法getInstances返回数据。（请参阅下面的进一步说明。）

你有（至少）三个选项：

1. 使用回调

2. 返回一个稍后将填充的空白对象，并让需要它的代码定期轮询它

3. 使用同步获取（不是一个好主意）

1.使用回调

你可以做的是接受一个回调，然后在数据到达时调用它：

this.getInstances = function(component, callback) {

    $.ajax({
        url: "/rpc/alerts2/commonObj_rpc.cfc?method=getInstances",
        data: {"component":component},
        type: "POST",
        async: true,
        success: function(data) {
            var getData = $.parseJSON(data);
            console.log("hey");
            var $render_component_instance = $("#instances").empty();
            $("#instances").append($("<option />").val("all").text("All Instances (Summed)"));
            $.each(getData, function (cIndex, cItem){
                var $instance = $("<option />").val(cItem.si_instance).text(cItem.si_label.toUpperCase());
                $render_component_instance.append($instance);
            })
            $("#instances").multiselect("refresh");
            callback(getData);
        }
    });
};

并这样称呼它：

myGraph.getInstances(component, function(data) {
    // Use the data here
});

2. 返回一个稍后会填充的空白对象

或者，您可以返回一个对象，该对象一开始是空白的，但稍后您会将数据作为属性添加到该对象。根据您在下面的评论，这可能最接近您正在寻找的内容。基本上，没有办法从函数外部访问函数的局部变量，但是您可以返回一个对象，然后稍后向它添加一个属性。

this.getInstances = function(component) {

    var obj = {};

    $.ajax({
        url: "/rpc/alerts2/commonObj_rpc.cfc?method=getInstances",
        data: {"component":component},
        type: "POST",
        async: false,    // <==== Note the change
        success: function(data) {
            var getData = $.parseJSON(data);
            console.log("hey");
            var $render_component_instance = $("#instances").empty();
            $("#instances").append($("<option />").val("all").text("All Instances (Summed)"));
            $.each(getData, function (cIndex, cItem){
                var $instance = $("<option />").val(cItem.si_instance).text(cItem.si_label.toUpperCase());
                $render_component_instance.append($instance);
            })
            $("#instances").multiselect("refresh");

            // Make the data available on the object
            obj.getData = getData;
        }
    });

    return obj; // Will be empty when we return it
};

并这样称呼它：

var obj = myGraph.getInstances(component);

// ...later...
if (obj.getData) {
    // We have the data, use it
}
else {
    // We still don't have the data
}

3.使用同步get

我不建议这样做，但您可以使呼叫同步。请注意，同步 ajax 请求将在 jQuery 的未来版本中消失。但只是为了完整性：

this.getInstances = function(component) {

    var getData;    
    $.ajax({
        url: "/rpc/alerts2/commonObj_rpc.cfc?method=getInstances",
        data: {"component":component},
        type: "POST",
        async: false,    // <==== Note the change
        success: function(data) {
            var getData = $.parseJSON(data);
            console.log("hey");
            var $render_component_instance = $("#instances").empty();
            $("#instances").append($("<option />").val("all").text("All Instances (Summed)"));
            $.each(getData, function (cIndex, cItem){
                var $instance = $("<option />").val(cItem.si_instance).text(cItem.si_label.toUpperCase());
                $render_component_instance.append($instance);
            })
            $("#instances").multiselect("refresh");
        }
    });

    return getData;
};

并这样称呼它：

var getData = myGraph.getInstances(component);

但同样，我不提倡这样做。同步 ajax 调用会锁定浏览器的 UI，导致用户体验不佳。