Question

我正在使用来自的代码 http://www.kryptonite-dove.com/blog/load-json-file-locally-using-pure-javascript 读取json文件并将其存储为变量。

代码工作正常;我的json对象成功打印到控制台。但是，我希望在函数外部访问变量。我把定义移到了外面，但这不起作用。我做错了什么？

function loadJSON(callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
  };
  xobj.send(null);  
}


var actual_JSON; <--- I moved the definition outside here 
function init() {
  loadJSON(function(response) {
  // Parse JSON string into object
    actual_JSON = JSON.parse(response);  
    console.log(actual_JSON); ---> this works
 });
}
init();
console.log(actual_JSON);     ----> this doesn't work; I get the var is undefined

Answer 1

loadJSON发出GET个请求。您发送给它的callback函数会在响应返回时执行，即何时获取JSON。

init();
console.log(actual_JSON);

因此，调用init()并在内部执行GET请求，因为它是异步的，所以它不会阻止其余代码的执行。因此，下一行console.log(actual_JSON)将被执行，此时actual_JSON的值不会被修改。

你可以做这样的事情让它更清晰：

function init() {
    loadJSON(function(response) {
        actual_JSON = JSON.parse(response);  
        consumeData(actual_JSON); //call another function with the actual JSON
    });
}

function consumeData(actualJson) {
    //write the rest of the code here
}

Answer 2

查看loadJSON内部您认为它需要一个函数作为回调。这样做是因为HTTP请求是异步发送的，由服务器和网络决定运行所需的时间，同时页面上的其余JavaScript继续执行（例如，您的最终console.log ）在设置变量之前。

当HTTP请求完成时（ onreadystatechange 位），它将运行您传递给 loadJSON 的函数 - 这是您设置的函数变量和有效的console.log。

你有多少选择：

同步运行Ajax，这样就不会执行其余的JS（坏主意）

为您正在执行的操作添加回调：

var actual_JSON; <--- I moved the definition outside here 
function init() {
  loadJSON(function(response) {
  // Parse JSON string into object
    actual_JSON = JSON.parse(response);
    exec_after_init();
 });

}

init();

function exec_after_init {
   console.log(actual_JSON);
}

注意：上面的代码尚未经过测试

json解析的Javascript变量范围

2 个答案: