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是异步。您按照您看到的顺序开始抓取脚本的过程，但这些请求可能完成任何顺序（取决于资源的大小，线程）在服务器上调度，网络变幻莫测等）。首先完成的任何一个将首先运行，可能不按要求的顺序。

在评论中你问过：

但是，我想按照请求的顺序执行JS脚本。我怎么能这样做？

如果我假设您想进行最小的更改（不切换到模块或其他内容），那么您可以使用承诺链，使用本机承诺（或本机承诺的polyfill）或jQuery的Deferred对象。

使用原生承诺：对$.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的语义来创建变量（如果它是文档中的第一个）或使用现有变量（如果不是）。如果我们创建它，我们会创建一个已解决的承诺。如果我们没有创建它，我们使用它已经引用的承诺。然后我们使用then从中链接并进行下一次$.getScript调用。 $.getScript会返回 thenable ，因此从then从属设备返回，承诺then将返回$.getScript承诺。

最终结果：每个$.getScript调用都不会在上一个调用完成之前启动。

如果您希望同时启动所有请求，但是按顺序运行返回的脚本，则必须使用$.ajax来检索脚本文本，然后{{3}当你知道它是那个剧本的时候运行它。

具有多个JavaScript代码的执行顺序

1 个答案: