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

【问题标题】：stop code execution until XMLHttpRequest cycle is complete停止代码执行，直到 XMLHttpRequest 循环完成
【发布时间】：2017-02-24 07:30:27
【问题描述】：

您的 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 ，即一个普通的 JavaScript AJAX 调用，因为你不想使用 jQuery）。

您不希望在成功填充locations 之前执行第二个脚本块（对Google Maps API 的调用）。您将如何通过以下任何方式实现这一目标：

回调？
JavaScript 承诺？
你还能想到其他方法吗？

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

【问题讨论】：

标签： javascript callback xmlhttprequest promise

【解决方案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 中，最好的做法是尽可能使用回调或承诺。

【讨论】：