javascript - 多个 JavaScript 代码的执行顺序

Question

我有下一个 HTML 代码:

<!-- Virtual Router Section -->
<div id="virtualRouterSection" class="col-lg-12 col-xs-12">
    {% include "network-virtualRouter.html" %}
</div>

<!-- Zones Section -->
<div id="zonesSection" class="col-lg-12 col-xs-12">
    {% include "network-zones.html" %}
</div>

<!-- Profiles Section -->
<div id="profilesSection" class="col-lg-12 col-xs-12">
    {% include "network-profiles.html" %}
</div>

<!-- Ipsec Tunnel Section -->
<div id="ipsecTunnelSection" class="col-lg-12 col-xs-12">
    {% include "network-ipsecTunnel.html" %}
</div>

每个network-* HTML脚本都有自己的JS代码，如下(network-virtualRouter.html示例):

<script type="text/javascript">
    $.getScript("{% static 'network-virtualRouter.js' %}");
</script>

那么问题来了:JS代码是如何解释的？在我看来，network-virtualRouter.js将首先执行。之后是network-zones.js等。 这是正确的吗？

先谢谢了，

迈克。

Answer 1

$.getScript 是异步。您正在按照您看到的顺序开始抓取脚本的过程，但是这些请求可能以任何顺序完成(取决于资源、线程的大小)服务器上的调度、网络变化等)。无论哪个先完成，都将首先运行，可能不按请求的顺序运行。

<小时/>

在您提出的评论中:

However, I would like to execute the JS scripts in the order they are requested. How could i do that?

如果我假设您想要进行最小的更改(而不是切换到模块或其他东西)，那么您可以使用 Promise 链，无论是使用 native Promise(或用于 native Promise 的 Polyfill)还是 jQuery 的 Deferred 对象。

使用原生 promise :每次调用 $.getScript看起来像这样:

var getScriptPromise = getScriptPromise || Promise.resolve();
getScriptPromise = getScriptPromise.then(function() {
    return $.getScript("{% static 'network-virtualRouter.js' %}");
});

与 $.Deferred :每次调用 $.getScript看起来像这样:

var getScriptPromise = getScriptPromise || $.Deferred().resolve().promise();
getScriptPromise = getScriptPromise.then(function() {
    return $.getScript("{% static 'network-virtualRouter.js' %}");
});

在这两种情况下，我们都使用 var 的语义在全局范围内创建变量(如果它是文档中的第一个变量)或使用现有变量(如果不是)。如果我们创造了它，我们就创造了一个兑现的 promise 。如果我们没有创建它，我们将使用它已经引用的 promise 。然后我们使用 then从它链接并进行下一个调用 $.getScript 。 $.getScript返回一个thenable，因此从 then 返回它兑现 promise then从$.getScript返回thenable ，这意味着它等待 thenable 稳定并以相同的方式稳定。

最终结果:每个 $.getScript直到前一个通话结束后，此通话才会开始。

如果您想让所有请求同时启动，然后按顺序运行返回的脚本，则必须使用 $.ajax相反，要检索脚本文本，则可能 $.globalEval 当您知道轮到该脚本时运行它。