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

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>

以上工作正常 - “地址”变量正确更新，当我在 initialize() 函数末尾将其记录到控制台时，它正确显示。问题是，如果我尝试将同一变量记录到页面下方的控制台:

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

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

我的直觉是，它与 initialize() 在页面加载后才被调用有关，但“地址”试图在页面加载完成之前被记录。如果这是问题所在，我不知道如何解决。

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

Answer 1

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

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

此处的一个简单解决方法是立即定义 address。它的组件在页面上是静态的，没有理由在函数内部发生这种情况。

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

    function loadAddress() {
      // ...
    }