在脚本执行过程中返回AJAX调用时，在JavaScript中会发生什么？

Question

假设我编写了一些执行AJAX调用的JavaScript，并将其myCallback作为一种回调方法在AJAX成功时执行。

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

一个操作是否优先于另一个操作？它们都同时运行吗？怎么了？

Answer 1

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

一个操作是否优先于另一个操作？它们都同时运行吗？怎么了？

浏览器上的JavaScript是单线程的（除非使用web
worker
，否则其语法是明确的）。因此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。如果事件img.src = ...在行与doSomethingElse行之间触发（因为浏览器将图像保存在缓存中），则对我的处理程序的回调将 排队
。doSomethingElse并doYetAnotherThing在我的处理程序之前运行。只有当控制权从我的代码传递出去时，对我的处理程序的排队调用才最终运行。JavaScript代码是单线程的，但环境不是。

您还可以采用非显而易见的方式屈服于主机环境。例如，通过调用alert或其breathren
confirm，prompt等等。这些功能坚持像疮大拇指，他们是现代的JavaScript，因为他们 不是 事件驱动;
而是在显示模式窗口时暂停JavaScript执行。但是正如bobince在这里的深入讨论中指出的那样，这并不意味着在显示该模式时您的其他任何代码都不会运行。它仍然是单线程的，但是一个线程被挂在一个地方（通过模式），​​并同时用于在其他地方运行代码。确实是非常好的区别。（鲍勃还指出了一些事件处理方法-
他的focus例如-似乎违反了此规则，但事实并非如此。他的示例 调用
focus，依次调用事件处理程序，然后返回；与Bob指出的项目的共同点是，您的代码已在宿主环境中调用了某个东西，该东西会消失并执行某些操作（显示模式对话框，触发blur和focus处理程序）等）。

（alert尤其是它的呼吸会引起各种各样的麻烦，尤其是在focus和周围blur，我建议您避免使用它们，而应使用更现代的技术（看起来也要好18倍左右）。）

因此，这些是答案开头提到的警告。特别是，如果myFunction调用alert，至少在Firefox上，ajax完成回调 将
在期间运行alert（在大多数其他浏览器上不会）。如果您想知道在alerts这样的情况下会发生什么和没有发生什么，这里有一个测试页测试setTimeout和ajax；您可以扩展测试以进一步进行。