我在HTML页面中有两个外部JavaScript文件。
我需要确保第一个文件script1.js在第二个文件script2.js之前运行。
它们都在HTML页面的body中；我该如何确保只有在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>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script 2 -->
<script src="js/script2.js"></script>
</body>
脚本1将在脚本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>
<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 属性：脚本会在页面解析完成后执行。如果既没有 async 也没有 defer 属性：脚本会立即获取并执行，在浏览器继续解析页面之前。
$.getScript("js/script1.js", function() {
console.log("script 1 loaded");
$.getScript("js/script2.js", function() {
console.log("script 2 loaded");
});
});HTML：
<script id="first" src="js/script1.js"></script>
JS：
$("#first").on("load", function() {
$("head").append('<script src="js/script2.js"></script>');
});
我理解你在使用JavaScript，但如果你有jQuery，你可以像这样使用(2) document.ready 函数，并加载那些脚本文件。每一个document.ready将会排队（使用deferred）为每一个。
$(function() { // same as document.ready
$.getScript('script1.js');
});
$(function() {
$.getScript('script2.js');
});
摘自：
$.getScript('script2.js')；在$.getScript('script1.js')；之后被调用，但第一个脚本可能需要比第二个脚本更长的时间来完成。 - A. Wolfffunction 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")
};
你的第一个脚本新增了新功能。
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>
script1.js会在script2.js之前执行。 - Drew Kennedy