腳本執行順序 - Javascript
[英]Scripts execution order - Javascript
問題描述
我有一個包含幾個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");
}
在控制台中，“完成”是寫的最后一件事，即使我的nbCinemas.js文件中還有其他console.logs。
你能幫助我嗎？ 為什么我的CSVParsing.js文件最后加載？ 如何在 nbCinemas.js 之前強制加載？
謝謝！
湯姆。
1 個解決方案
解決方案1
0 2017-04-08 01:01:33
首先，可能
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 內聯腳本和延遲腳本執行順序
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.