javascript - 停止代码执行，直到 XMLHttpRequest 周期完成

Question

您的 Google map 代码结构如下所示:

<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 之前执行第二个脚本 block (对 Google Maps API 的调用)。 您将如何通过以下任一方式实现这一目标:

• 回调？
• JavaScript promise ？
• 您还能想到其他方法吗？

另外，是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 中，最佳实践是尽可能使用回调或 Promise。