javascript - 当脚本执行时 AJAX 调用返回时，JavaScript 会发生什么？

Question

假设我编写了一些 JavaScript 来执行 AJAX 调用，使用 myCallback 作为 AJAX 成功时执行的回调方法。

然后假设在异步调用 myCallback 时在我的页面上调用其他一些名为 myFunction 的 JavaScript 方法。

一个操作是否优先于另一个操作？它们是否同时运行？会发生什么？

Answer 1

Suppose then that some other JavaScript method called myFunction is being invoked on my page when myCallback is invoked asynchronously.

Does one operation take precedence over the other? Do they both run at the same time? What happens?

浏览器上的 JavaScript 是单线程的(除非您使用 web workers ，并且它的语法是明确的)。所以 myFunction 将运行直到它返回——有一些注意事项(继续阅读)。如果 ajax 层在 myFunction 正在运行(很可能)并且需要调用回调时完成操作，则该调用将排队 .下次您的代码产生时，将触发队列中的下一个调用。

那么，看起来我们永远不必担心竞争条件。这大部分是正确的，但也有一些微妙之处。例如，考虑这段代码:

var img = document.createElement('img');
img.src = /* ...the URL of the image... */;
img.onload = function() {
    // Handle the fact the image loaded
    foo();
};
doSomethingElse();
doYetAnotherThing();

由于浏览器上的 JavaScript 是单线程的，我保证在图像加载时获得 load 事件，对吗？

错了。

JavaScript 代码是单线程的，但环境的其余部分可能不是。所以可能会发生这样的情况，设置了 img.src，浏览器可能会看到它有一个可以使用的图像的缓存副本，因此它会触发 load img 在 img.src = ... 行和 img.onload = ... 之间的事件> 线。由于我的处理程序尚未附加，我没有接到电话，因为在我附加我的处理程序时，事件已经触发。

但是如果我们反转这些行，你可以看到排队的效果:

var img = document.createElement('img');
img.onload = function() {
    // Handle the fact the image loaded
    foo();
};
img.src = /* ...the URL of the image... */;
doSomethingElse();
doYetAnotherThing();

现在我在 设置 src 之前 Hook 事件。如果事件在 img.src = ... 行和 doSomethingElse 行之间触发(因为浏览器在缓存中有图像)，我的处理程序的回调会得到 < em>排队。 doSomethingElse 和 doYetAnotherThing 在我的处理程序执行之前运行。只有当控制从我的代码中移出时，对我的处理程序的排队调用才会最终运行。 JavaScript 代码是单线程的，但环境不是。

您还可以以不明显的方式屈服于宿主环境。例如，通过调用 alert 或其 breathren confirm、prompt 等。这些函数就像现代 JavaScript 中的大拇指一样突出，因为它们不是事件驱动的；取而代之的是，在显示模态窗口时暂停 JavaScript 执行。但是作为bobince在 his in-depth discussion here 中指出，这并不意味着您的其他代码都不会在该模式显示时运行。它仍然是单线程的，但是一个线程被卡在一个地方(通过模态)，同时用于在其他地方运行代码；确实是一个很好的区别。 (Bob 还指出了一些事件处理——他的 focus 示例——这似乎违反了这条规则，但实际上并没有。他的示例调用 focus，它依次调用事件处理程序，然后返回；与您调用自己的函数没有什么不同。) Bob 指出的项目的关键共同点是您的代码调用了宿主环境中的某些东西离开并做一些事情(显示模式对话框、触发 blur 和 focus 处理程序等)。

(alert 和它的 breathren 特别会引起各种麻烦，尤其是在 focus 和 blur 周围，我建议避免使用它们更现代的技术(看起来也可以好 18 倍)。

所以这些是答案开头提到的警告。特别是，如果 myFunction 调用 alert，至少在 Firefox 上，ajax 完成回调 将 在 alert 期间运行>(它不会在大多数其他浏览器上)。如果您想尝试在 alerts 期间会发生什么和不会发生什么，here's a test page测试 setTimeout 和 ajax；您可以扩展测试以走得更远。