小编典典

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

ajax

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

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

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


阅读 260

收藏
2020-07-26

共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行之间触发(因为浏览器将图像保存在缓存中),则对我的处理程序的回调将 排队
doSomethingElsedoYetAnotherThing在我的处理程序之前运行。只有当控制权从我的代码传递出去时,对我的处理程序的排队调用才最终运行。JavaScript代码是单线程的,但环境不是。

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

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

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

2020-07-26