javascript - 是否在放弃事件循环控制之前完全评估异步 javascript？

Question

我异步加载 Google Maps JS:

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = '//maps.googleapis.com/maps/api/js?....';
document.body.appendChild(script);

我的一个脚本依赖于它提供的 google.maps 对象，所以我检查 google.maps 是否被定义，如果没有，我在 200 毫秒:

initializeGoogleMaps: function() {
  if (typeof google === 'undefined') {
    window.setTimeout(this.initializeGoogleMaps.bind(this), 200);
  } else {
    var autocomplete = new google.maps.places.Autocomplete(...)
  }
}

但是，当我查看 Google map 时 script正在加载，它是这样开始的:

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
  // then a lot more

这是我的问题:我这里有竞争条件吗？ setTimeout 是否有可能在评估异步脚本时触发？视觉上:

// This is the googleapis.com 3rd party script. It has been downloaded
// by the browser, and is now in the process of being evaluated.

window.google = window.google || {}; // google is now defined
google.maps = google.maps || {};     // google.maps is now defined

// ==== Can my setTimeout fire here? =====
// My `if (typeof google === 'undefined')` would be
// FALSE here, even though this script has not finished loading!
// Or, due to the single thread, will the browser finish evaluating
// this script before allowing queued up setTimeouts to fire?
// =======================================

(function() {
  // then a lot more

我知道 JS 在某种意义上是单线程的，但我不确定它如何处理异步脚本。当开始评估异步脚本时，它是否会在将控制权交还给其他异步脚本和 setTimeout 回调的事件循环之前完成加载整个文件？

Answer 1

Do I have a race condition here?

没有。 JavaScript 是“单线程”的，这意味着每个脚本和每个回调都在下一个(在事件循环中)开始之前被完全评估(“运行到完成”)。

Is it possible for a setTimeout to fire while an async script is being evaluated?

从技术上讲，超时可以在脚本仍在评估时过期(很可能是在脚本需要很长时间执行时)，但是当它过期时并不意味着回调会立即执行，它只是被安排到尽快运行(当前事件循环结束后)。