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需要该配置文件不会触发，直到加载变量。因此，将您的地图功能包装在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!;
};

在Javascript中加载JSON文件

1 个答案: