RequireJS中依赖模块加载完成后，依赖脚本执行顺序是否有保障？

在RequireJS环境下，若多个脚本均依赖同一模块，当该模块加载完成后，这些脚本的回调函数执行顺序是否与它们的定义顺序一致？

简单来说，以下述配置为例，会不会出现控制台先输出2再输出1的情况？

示例代码 #

HTML 代码

<head>
    <script src="require.js"></script>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
    <script async data-requiremodule="jquery" src="jquery.js"></script>
</head>

script1.js

require([
    'jquery'
], function () {
    console.log(1);
});

script2.js

require([
    'jquery'
], function () {
    console.log(2);
});

结论 #

不会出现先输出2再输出1的情况，回调函数的执行顺序与require调用的顺序严格一致。

原因解释 #

RequireJS内部维护了一个回调等待队列：

• 当调用require()时，如果依赖的模块还未加载完成，对应的回调函数会被按调用顺序加入队列。
• 当依赖模块（此例中的jQuery）加载并初始化完成后，RequireJS会按照队列中回调函数的添加顺序，依次执行它们。

结合示例来看：script1.js先被浏览器加载并执行，它的require调用会先将回调函数加入队列；随后script2.js的require调用将自己的回调加入队列。因此当jQuery加载完成后，会先执行script1的回调输出1，再执行script2的回调输出2，顺序不会颠倒。

另外，即使jQuery的script标签带有async属性，也不会影响这个执行顺序——因为RequireJS会确保所有依赖条件满足后，才按队列顺序触发回调，不受脚本加载的异步特性干扰。

内容的提问来源于stack exchange，提问作者Timothy Fisher