Question

我正在尝试从csv加载数据并将其存储在对象数组中。我知道全局变量是不受欢迎的，但我不能想出一种更好的方法来存储数据并从多个函数中访问它。

这是我的代码：

var mydata = new Array;
$(document).ready( function () {
    $.get('./datafile.csv', function(data) {
        var head = data.split("\n");
        for(var i = 1; i < head.length; i++){
            line = head[i].split(",");
            var obj = {
                index:i,
                img:line[0],
                caption:line[1],
                desc:line[2]
            };
            mydata.push(obj);
        }
        console.log(mydata); //1
    });
    console.log(mydata); //2
    //I then want to select various elements on my page and set some attributes to
    //an object in my data, but I can't since everything is undefined
});

在第一个位置它正确记录我的数据，但在第二个位置它记录一个空数组。我在JavaScript中阅读了关于全局变量的this article，所以我不确定出了什么问题。

Answer 1

第二部分（//2）运行得太早了。执行$.get时，它只会启动HTTP请求以获取CSV，但不会等待它完成 - 这就是您需要传递function(data)的原因。请求完成后，将调用回调函数，并且您应该继续初始化。

因此，您的代码应该如下所示。（如果你需要在其他地方使用这些数据，你可以继续使用全局数据，但不仅仅需要它）

$(document).ready( function () {
    $.get('./datafile.csv', function(data) {
        var mydata = [];
        var head = data.split("\n");
        // ...

        console.log(mydata); //1
        continueSetup(mydata); // 2
    });
});

function continueSetup(mydata) {
    // do what you need
}

Answer 2

我认为您可能会对代码中发生的事情的顺序感到困惑。首先，使用这样的全局变量没有任何问题，特别是如果您在整个页面中多次访问它（使用事件等）。其次，您在代码中的“第二”位置看到一个空数组的原因是因为该地点（＃2）实际上在之前执行 get函数已收到数据并且之前＃1。

get是一个异步函数，这意味着它等待接收响应，然后执行内部代码（包括＃1）。但是，＃2会立即执行，而您的数组仍为空。

Answer 3

在2，数据将与您初始化的数据相同。在1，数据将与您填充的数据相同。

如果您仔细观察过，请先打印{p> 2。这是因为$.get是异步调用并在后台执行。您向$.get提供的回调将在GET请求成功完成或出错后运行。

全局数组javascript的范围

3 个答案: