我有这样的结构：
<script src="/Content/Scripts/1.js"></script>
<script async src="/Content/Scripts/2.js"></script>
我需要异步加载两个文件并在 1.js 之后运行 2.js 文件。我怎么能做到？
如果我将async 添加到 2.js，它们将随机运行。
【问题讨论】：
async添加到两者并在1.js之后调用2.js
标签： javascript html asynchronous
您可以动态添加脚本，默认情况下它们是异步加载的。
为确保有序执行，您可以将它们显式标记为非异步。
这是一个最简单的例子：
<html>
<head>
<script>
[
'https://code.jquery.com/jquery-1.11.3.min.js',
'1.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
</script>
</head>
<body>
</body>
</html>
文件 1.js 包含 jquery 代码：
$("body").append("<div>It works</div>");
在此示例中，文件是异步加载的，但保持指定的顺序。如需进一步阅读，您可以查看：http://www.html5rocks.com/en/tutorials/speed/script-loading/
【讨论】：
一种方法是异步加载第一个文件（1.js），然后动态添加第二个脚本，如另一个答案中所述，使其异步加载。
加载第一个文件：
<script async src="/Content/Scripts/1.js"></script>
然后在第一个文件中，在底部包含以下内容，
var script = document.createElement('script');
script.src = "/Content/Scripts/2.js";
script.async = true;
document.head.appendChild(script);
希望这会有所帮助:)
【讨论】：
另一种方法是使用另一个属性来存储第二个的源内容
<script async src="/Content/Scripts/1.js"></script>
<script id="second" async data-src="/Content/Scripts/2.js"></script>
在你完成两个文件之间的依赖代码（如果有的话）之后的第一个脚本中，写
var script = document.getElementById('second');
script.setAttribute("src",script.getAttribute("data-src"));
script.removeAttribute("data-src"); //Totally upto you if you want to remove it
与其他解决方案相比，这为您将标签放置在任何地方提供了更大的灵活性。
【讨论】：
data-id，它会随着每个脚本的增加而增加，并在每个脚本的末尾检查data-id +1 是否存在并且它是否执行相同的过程。我认为这应该是公认的答案。
常规异步脚本不支持加载顺序。顺便说一句，ES2015 及更高版本具有import 语法来按顺序异步加载脚本文件：
import x from "x.js";
import y from "y.js";
或者您也可以使用编程 API：
Promise.all([System.import("x.js"), System.import("y.js")]).then(() => {
// Do stuff once they've been already loaded...
});
如果你今天想使用这些功能，你应该看看：
【讨论】：
从“Abhishek singh”的答案出发，我自己创建了一些 sn-p。
您可以根据需要连续执行多个 js 文件。
html 看起来像这样：
<title>Script execution sequence</title>
<body>
<script async data-ascript-id='2' data-src='second.js'></script>
<script async data-ascript-id='1' data-src='first.js'></script>
<script async src="pixel.js"></script>
</body>
pixel.js：
console.log("Pixel script executed");
var aon_scripts = document.querySelectorAll('[data-ascript-id]');
if(aon_scripts.length > 0){
var next_script = document.querySelectorAll('[data-ascript-id="1"]')[0];
console.log("pixel.js found next script");
next_script.setAttribute("src", next_script.getAttribute("data-src") );
}
first.js：
console.log("Next script executed");
var current_script = document.currentScript;
var this_script_data_id = current_script.getAttribute("data-ascript-id");
if(aon_scripts.length > parseInt(this_script_data_id) ){
console.log("There is more script");
var next_script = document.querySelectorAll('[data-ascript-id="'+
(parseInt(this_script_data_id) + 1) +'"]')[0];
next_script.setAttribute("src", next_script.getAttribute("data-src") );
}
else{
console.log("No more scripts to execute");
}
second.js 和那里的所有代码都将与 first.js 具有相同的代码。
当我拥有 first.js 和 second.js 时的输出：
pixel.js: Pixel script executed
pixel.js:11 pixel.js found next script
first.js:1 Next script executed
first.js:9 There is more script
second.js:1 Next script executed
second.js:18 No more scripts to execute
如果有人想要详细解释，请告诉我。
【讨论】：