Javascript变量范围不起作用[重复]

Question

我正在尝试解析 JSON。我正在使用

$getJSON

获取文件并将其内容保存到变量

JSONfile

，然后我将其传递给解析函数，但在 getJSON 函数之外它包含一个 null，而在它内部，它甚至包含正确的数据，变量

JSONfile

是全局声明的（我认为是）。我是 Javascript 初学者。请解释这里发生了什么或指出类似的事情（找不到自己）。

var atlasJSON = "http://127.0.0.1:8000/sprites/SPRITE.json";
var JSONfile = null;

function setup(){

    body = document.getElementById('body');
    canvas = document.createElement('canvas');

    spriteManager = new SpriteSheetClass();
    spriteManager.load(spritesheet);


    $.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here
    });

    console.log(JSONfile); // null !!!
    debugger;

    spriteManager.parseAtlasDefinition(JSONfile);

    for(var i=0; i<spriteManager.sprites.length ; i++){
        console.log(spriteManager.sprites[i]);    
    }

    //canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.setAttribute('width', 1024);
    canvas.setAttribute('height',800);

    body.appendChild(canvas);
};

Answer 1

$.getJSON 是异步的，这意味着当你调用时：

$.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here
    });

然后

console.log(JSONfile); // JSONfile is null...

这是预期的行为。 JSON 仅在调用函数（数据）时可用。

发生的情况是函数 getJSON 不会阻止代码执行。 它将通过网络向服务器发送请求并等待返回数据。代码现在将继续在下一行代码（在您的情况下为 console.log）上执行，依此类推，直到收到来自远程服务器的数据。一旦完全接收到此类数据，它将调用该函数。

你可以在你的函数中做什么，一旦它返回，就是将 JSON 分配给一个全局变量，这样你就可以在代码中的任何地方访问它，即。

var JSONData = null;

然后一旦调用函数（数据）将其分配给变量。这样（并且只有一次调用函数（数据）才会）它可用于所有 JavaScript 代码。

Answer 2

您需要在回调中使用 json

$.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here

    console.log(JSONfile); // null !!!
    debugger;

    spriteManager.parseAtlasDefinition(JSONfile);

    for(var i=0; i<spriteManager.sprites.length ; i++){
        console.log(spriteManager.sprites[i]);    
    }

    //canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.setAttribute('width', 1024);
    canvas.setAttribute('height',800);

    body.appendChild(canvas);
});

Answer 3

你还需要把变量解析成函数

var JSONfile = null;

function setup(JSONfile){

    body = document.getElementById('body');
    canvas = document.createElement('canvas');