javascript - 在 Javascript 中加载 JSON 文件

Question

我想加载带有配置信息的本地 JSON 文件，以便在我的 JAVASCRIPT 文件中使用。

我尝试过这个:

var map;
var initialMapCoordinates = "";

function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        initialMapCoordinates = jd.googleMaps.initialCoordinates;
        initMap();
    });
};

function initMap() {
    google.maps.visualRefresh = true;
    var mapOptions = {
        center: new google.maps.LatLng(initialMapCoordinates),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
}

google.maps.event.addDomListener(window, 'load', loadConfigFile());

我想将配置文件的不同元素分配给变量，然后在我的脚本中使用它们。在那里我仍然失败了。我尝试使用全局变量，但我似乎在这里做错了什么。

如何获取 jd.googleMaps.initialCoordinates 的内容放入变量以在函数外部使用？

Answer 1

扩展我的评论: 在全局变量有机会被异步请求设置之前，您正在访问该全局变量。您需要检查以确保它已加载，有多种方法可以处理此问题，但通常您应该确保需要该配置文件的 javascript 在加载变量之前不会触发。因此，将 map 功能包装在 init() 函数中，并在设置全局后调用它。

var configData = "";
function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        configData = jd.googleMaps.initialCoordinates;
        init();
    });
};

function init() {
console.log(configData);
}

更多关于异步的内容。基本上，导致此问题的原因是在收到结果之前不会调用设置全局变量的函数。由于 Javascript 在单个线程上运行，因此您不希望阻止其余脚本运行，因为它会卡住页面。这意味着 .getJSON 之后的其余脚本将在 json 文件实际加载之前执行。

因此，在实践中，原始脚本的执行顺序将如下所示:

First: var configData = "";
Second/Third: loadConfigFile() and then getJson();
Fourth: Log configData to console;
Fifth: Set config data to the json file.

var configData = "";  //First
function loadConfigFile() {  //Second
    $.getJSON('js/config.json', //Third
         function(jd) {
        configData = jd.googleMaps.initialCoordinates; //Fifth
    });
};
console.log(configData); //Fourth

更新三:

做这样的事情。

function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        initialMapCoordinates = jd.googleMaps.initialCoordinates;
        initMap(); //remove the loadconfig from this function
        console.log(initialMapCoordinates) //now available!;
    });
    console.log(initialMapCoordinates) //not available!;
};