Question

我的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>

Answer 1

浏览器将按照找到的顺序执行脚本。如果您调用外部脚本，它将阻止页面，直到脚本加载并执行。

所以，如果你的代码是：

<select>

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

Answer 2

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

HTML：

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

JS：

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

Answer 3

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

如果您愿意，可以自己使用jQuery.getScript之类的内容来完成，或者在所有javascript中使用它作为示例。

Answer 4

我知道您正在使用javascript，但如果您使用jQuery，则可以使用（2）document.ready这样的函数，并加载这些脚本文件。每个document.ready将为每个deferred排队（使用$(function() { // same as document.ready $.getScript('script1.js'); }); $(function() { $.getScript('script2.js'); });）。

tr {
  display: block;
  float: left;
}
tr:nth-child(3) {
 float: none;
}

取自：

Answer 5

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")
};

Answer 6

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

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>

Answer 7

<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属性时使用）。

注意：有几种方法可以执行外部脚本：

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

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

7 个答案:

定义和用法