在另一个之前加载一个外部javascript文件？答案

【问题标题】：Load an external javascript file before another?在另一个之前加载一个外部javascript文件？
【发布时间】：2016-07-20 12:37:05
【问题描述】：

我的 html 页面中有两个外部 javascript 文件。

我需要确保第一个文件 script1.js 在我的第二个脚本 script2.js 之前运行。

我将它们放在我的 html 页面的正文中；如何确保在 script1 中的函数运行之前不使用 script2？

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <!-- Script 1 -->
    <script src="js/script1.js"></script>

    <!-- Script 2 -->
    <script src="js/script2.js"></script>
</body>
</html>

【问题讨论】：

把一个放在另一个前面。你试过了吗？有问题吗？
嗯，已经是这样了，你的问题是什么？？？脚本默认同步加载
您是在尝试过之后才问我们这个问题吗？它奏效了吗？如果不是，为什么？是否存在实际问题，或者您是在“为了好玩”而问这个问题？
记住 HTML 是自上而下呈现的，因此您在代码中的内容已经保证 script1.js 将在 script2.js 之前触发。
“我的第一个脚本调用了一个 php 函数”，这个调用是异步的，所以你有问题的根源

标签： javascript jquery html

【解决方案1】：

浏览器将按照找到脚本的顺序执行这些脚本。如果你调用外部脚本，它会阻塞页面，直到脚本被加载并执行。

所以如果你的代码是：

<body>

    <!-- Script 1 -->
    <script src="js/script1.js"></script>

    <!-- Script 2 -->
    <script src="js/script2.js"></script>
</body>

脚本 1 将在脚本 2 之前运行。

【讨论】：

【解决方案2】：

<script> 标签为您管理它...但请继续阅读...

JavaScript 是同步的，这意味着它会默认逐行执行...

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <!-- Script 1 -->
    <script src="js/script1.js"></script> <!-- first gets executed and get finished -->

    <!-- Script 2 -->
    <script src="js/script2.js"></script> <!-- then second gets executed and get finished -->
</body>
</html>

但同时 JavaScript 也可以是异步的...

所以<script> 标签有一个属性，它使加载异步... async 脚本标签上的属性...

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <!-- Script 1 -->
    <script src="js/script1.js" async></script> <!-- load asynchronously -->

    <!-- Script 2 -->
    <script src="js/script2.js" async></script> <!-- load asynchronously -->
</body>
</html>

定义和用法

async 属性是一个布尔属性。
当存在时，它指定脚本将被执行可用时立即异步。

注意：async 属性仅适用于外部脚本（并且仅应在存在 src 属性时使用）。

注意：可以通过多种方式执行外部脚本：

如果 async 存在：脚本与页面的其余部分（脚本将在页面继续时执行解析）如果 async 不存在并且 defer 存在：脚本当页面完成解析时执行如果既不是异步也不是 defer 存在：立即获取并执行脚本，在浏览器继续解析页面之前

【讨论】：

【解决方案3】：

您无法检查它是否正在运行。您只能使用 jQuery 观看加载，并在完成后附加第二个脚本。

HTML：

<script id="first" src="js/script1.js"></script>

JS：

$("#first").on("load", function() {
    $("head").append('<script src="js/script2.js"></script>');
});

【讨论】：

因为 #first 在您附加事件侦听器时已经加载，我认为这不会起作用。
DOM 准备好后不开始加载吗？然后脚本应该在加载完成之前启动。否则也通过 js 追加第一个脚本 ...

【解决方案4】：

确保您以正确的方式加载所有脚本，您必须使用一些依赖项处理库，例如 RequireJS，它允许您在声明的依赖项正确加载时执行代码。

如果您愿意，您可以使用 jQuery.getScript 之类的东西自己完成，或者以所有 javascript 为例。

【讨论】：

【解决方案5】：

我知道您使用的是 javascript，但如果您有 jQuery，您可以使用 (2) document.ready 函数，并加载这些脚本文件。每个document.ready 都会排队（使用deferred）。

$(function() {  // same as document.ready
     $.getScript('script1.js');
});

$(function() {
     $.getScript('script2.js');
});

取自：

【讨论】：

使用您没有任何保证，而不是在第二个之前加载第一个 srcipt。你在这里做一些异步 ajax 调用。唯一的保证是 $.getScript('script2.js'); 在 $.getScript('script1.js'); 之后调用，但第一个可能比第二个需要更多时间来完成
这不是OP所说的吗？ “需要确保第一个文件 script1.js 在我的第二个脚本 script2.js 之前运行。”
但是你的答案就是不这样做， $.getScript() 是异步的。事实上，OP 发布的代码已经有他预期的行为。毕竟开头的问题没有意义

【解决方案6】：

function loadJS(file) {
    // DOM: Create the script element
    var jsElm = document.createElement("script");
    // set the type attribute
    jsElm.type = "application/javascript";
    // make the script element load file
    jsElm.src = file;
    // finally insert the element to the body element in order to load the script
    document.body.appendChild(jsElm);
}



myScript.src = 'http://code.jquery.com/jquery-2.1.4.min.js';
myScript.onload = function() { 
  loadJS("js/script2.js")
};

【讨论】：

【解决方案7】：

您的第一个脚本添加新功能。

function firstScriptFunction(){
 //i have done nothing here
}

您的 Html 页面

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <!-- Script 1 -->
    <script src="js/script1.js"></script>

    <!-- Script to load script 2 -- >
    <script type="text/javascript">

       function loadSecondScript() {
            if (!(typeof firstScriptFunction == 'function')) {
                window.setTimeout(loadSecondScript, 3000);
            }
            else {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'js/script2.js';
                document.getElementsByTagName('body')[0].appendChild(script);

            }
        }
        $(document).ready(function(){
          loadSecondScript();
       });
    </script>

</body>
</html>

【讨论】：