Question

我正在尝试在我的JavaScript对象中创建一个数组，该数组包含使用jQuery中的$ .getJSON（）函数从JSON文件中提取的对象。我遇到了范围问题，似乎数组元素在$ .getJSON（）函数中被设置，但在它之外，数组是空的。这是代码：

function player(playlist){
...
var tracks = [];

this.start = function() {
...
    $.getJSON(playlist, function(data){
        $.each(data.tracks, function(key,value){
            var track_info = function(info){return info}(value);
            tracks.push(track_info);
        });
        console.log("from .getJSON function");
        console.log(tracks);
    });
    console.log("outside .getJSON function");
    console.log(tracks);
    ...
};
...
$(document).ready(function(){
    var the_player = new player(playlist);
    the_player.start();
)};

输出结果为：

outside .getJSON function
[]
from .getJSON function
[Object, Object, Object]

所有对象都包含JSON文件中的正确数据。

我对这个问题感到困惑，有人可以帮我理解吗？

Answer 1

提示是顺序：

outside .getJSON function
[]

其次是

from .getJSON function
[Object, Object, Object]

在获得JSON响应之前，您的外部代码正在执行，因此毫不奇怪，tracks为空。这可能看起来违反直觉 - from .getJSON function首先出现在源代码中，然后执行第二个！这是因为.getJSON不同步。它在继续执行下一个语句之前不会执行其回调参数。它会立即继续到下一个语句，并在稍后执行回调。

Answer 2

$。getJSON是一个AJAX调用，并且是异步的。这意味着在AJAX调用返回（并填充数组）之前调用console.log("outside .getJSON function");。这是正在发生的事情的提示是你在“内部”之前看到的“外部”

JavaScript对象中的范围问题

2 个答案: