Question

我正在尝试使用以下代码（console.log只是为了查看正在发生的事情）。我已经在任何函数之外声明了全局变量，但它似乎只是在函数内部更新它们。

<script type="text/javascript">

var map;
var geocoder;
var address;

function initialize(){
    geocoder = new google.maps.Geocoder();

    var mapOptions = {
        center:new google.maps.LatLng(-76.146294, 43.052081),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15,
        streetViewControl: false
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    loadAddress();
    console.log("initialize function: " + address); //this correctly returns the updated address
}

function loadAddress(){
    var property = <?php echo json_encode(urlencode($Residential['ReAddress'])); ?>;
    var zipCode = <?php echo json_encode($Residential['zipCode']); ?>;
    address = property + "," + zipCode;
    geocoder.geocode({'address': address}, function(result, status){
        if(status === "OK"){
            map.setCenter(result[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: result[0].geometry.location
            });
        }
        else {
            alert("Failed to geocode: " + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

以上工作正常 - 'address'变量正确更新，当我在initialize（）函数结束时将其记录到控制台时，它会正常显示。问题是如果我尝试将相同的变量记录到页面下方的控制台：

<script type="text/javascript">
console.log("further down page: " + address); //this comes back as 'undefined'
</script>

当我尝试这样做时，我只是'未定义'。我对javascript很新，但我的理解是，如果变量是在任何函数之外声明的，那么它是一个全局变量，它应该可以在任何地方访问。我觉得我错过了一些非常明显的东西，但我不知道是什么（我花了很多时间搜索！）。

我的预感是，它必须在页面加载之后才调用initialize（），但是在页面加载完成之前尝试记录“地址”。如果这是问题，我不知道如何解决它。

另外，我确信上面的代码不是最好的做事方式，但这更像是一种学习体验。谢谢！

Answer 1

问题是geocoder.geocode函数是异步：它不会阻塞代码，执行以下行，但内部回调不被调用直到服务器响应。

这意味着您必须将console.log行置于回调内或回调中调用的函数中：

geocoder.geocode({'address': address}, function(result, status){
    if(status === "OK"){
        map.setCenter(result[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: result[0].geometry.location
        });
    } else {
        alert("Failed to geocode: " + status);
    }
    otherFunc();
});

function otherFunc(){
    console.log("further down page: " + address);
}

Answer 2

你的预感是正确的。在调用initialize方法之前，页面下方的代码正在执行。 window.load is not fired until the DOM is loaded, including images：

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。

这里的一个简单修复就是立即定义address。它的组件在页面上是静态的，没有理由在函数内部发生这种情况。

    var property = <?php echo json_encode(urlencode($Residential['ReAddress'])); ?>;
    var zipCode = <?php echo json_encode($Residential['zipCode']); ?>;
    var address = property + "," + zipCode;

    function loadAddress() {
      // ...
    }

Answer 3

问题是当浏览器加载页面时，第二个<script> - 元素会立即执行。在第一个块中，为load-event添加DOM-listener，它应该调用initialize()。但是，这将在浏览器完全加载并构建页面后执行。

如果在回调到geocoder.geocode()后确定后记录该值，则应打印正确的值。

Javascript全局变量不在任何函数之外更新

3 个答案: