Question

您的Google地图代码结构如下所示：

<script>
function initMap() {

}

var locations = 
[
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181}
]
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API-key&callback=initMap" >
</script>

问题是，您希望通过调用服务器填充locations（使用XMLHttpRequest，即一个vanilla JavaScript AJAX调用，因为您不想使用jQuery）。

并且您不希望执行第二个脚本阻止（对Google Maps API的调用），直到成功填充locations为止。您将如何通过以下任何方式实现此目的：

回电？
JavaScript承诺？
您能想到的任何其他方法吗？

另外，a semaphore, as suggested here是否可行？

Answer 1

function initMap() {
  var xhr= new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     LoadGoogleMaps();
    }
  };
  xhr.open();//<-- Your parameters go here
  xhr.send();
}

function LoadGoogleMaps(){
  // Logic to load maps
}

标准XHR文档可在此处找到：http://www.w3schools.com/xml/ajax_intro.asp

信号量在概念上是一个好主意，但有时可能非常难以实现。通常在javascript中，最好在可能的情况下使用回调或承诺。

停止代码执行，直到XMLHttpRequest循环完成

1 个答案: