我有一个包含多个 JS 脚本的 HTML 文件:
<!DOCTYPE html> <html>
<head>
<title>Application</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="initMap.js"></script>
<script src="CSVParsing.js"></script>
<script src="nbCinemas.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=geometry&callback=initMap"></script>
</head>
<body>
<div id="map" style="width:1000px; height:800px; margin-left:auto; margin-right:auto;"></div>
</body>
我的问题是，在我的 nbCinemas.js 文件中，我使用了一个应该在 CSVParsing.js 中初始化的全局变量...但它不是。问题是，我认为我的 CSVParsing.js 文件是最后加载的。这是文件:
var arrayData;
d3.csv("cinemas-a-paris.csv", function(data) {
data.forEach(function(d) {
d.lat = +d.lat;
d.lng = +d.lng;
});
arrayData = data;
print();
});
function print() {
console.log("done");
}
在控制台中，“done”是最后写入的内容，即使我的 nbCinemas.js 文件中还有其他 console.log。
你能帮我吗？为什么我的 CSVParsing.js 文件最后加载？我如何强制它在之前nbCinemas.js加载？
谢谢!
汤姆。
最佳答案
首先，可能
d3.csv("cinemas-a-paris.csv", function(data) {
data.forEach(function(d) {
d.lat = +d.lat;
d.lng = +d.lng;
});
arrayData = data;
print();
});
是异步发生的事情，因此它被发送到事件循环，并且“完成”消息只是显示，而过去的函数尚未完成。
之后，下一个文件被加载并初始化，并出现您遇到的问题。
解决这个问题的一种方法是，验证全局变量是否存在，如果存在，则动态加载下一个 js 文件，如下所示:
// checking out the variable...
if (typeof variable !== 'undefined') {
// ...the variable is defined, so
var script = document.createElement('script');
script.src = 'http(s)://yourWebSiteURl.com/..js/nbCinemas.js';
}
这样您就可以确保在全局变量已经存在之后加载最后一个文件
关于javascript - 脚本执行顺序 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43288938/