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

不能，获取是异步的。 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。使用同步获取

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

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