脚本执行顺序 - Javascript答案

【问题标题】：Scripts execution order - Javascript脚本执行顺序 - Javascript
【发布时间】：2017-04-08 00:36:46
【问题描述】：

我有一个包含几个 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.log。

你能帮帮我吗？为什么我的 CSVParsing.js 文件最后加载？如何强制它加载 before nbCinemas.js？

谢谢！

汤姆。

【问题讨论】：

在 chrome 控制台中检查您的网络选项卡 - 它会显示每个 JS 的加载时间，您可以明确查看是否加载了最后一个内容
csv 函数正在加载异步数据。因此在您加载 nbCinemas.js 时它不可用
@TypedSource 好吧，我确定是因为这个......我们可以确保在加载 nbCinemas.js 时加载数据吗？
@TomFévrier 在第二个文件中创建一个事件侦听器，并在 csv 就绪状态下创建一个事件调用。如果事件被调用，则在事件侦听器上启动第二个脚本

标签： javascript global-variables order-of-execution

【解决方案1】：

首先，可能

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';
}

这样你可以确保在你的全局变量已经存在之后加载最后一个文件

【讨论】：

不客气！让我知道这是否足以解决您的问题（：
我编辑了我的答案以防万一。外部js资源更清晰
肯定有更好的办法……真的没有别的办法了吗？