代码内部变量问题

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，导致糟糕的用户体验。