我想知道如何等待一个脚本加载完成后再加载下一个。例如(并且完全加载另一个页面到页面中):
文件2:script1.js
首先,我们的目标是等待脚本执行完毕,这样变量才能在页面上输出值。但以上代码并不满足这一条件。
<html>
<script src = "script1"></script>
<script src = "script2"></script>
<script>
$(document).ready( function() {
$("#content1").load("index2.html");
});
</script>
</html>
在成功加载并运行脚本1后,我想要加载脚本2,并在完全加载后将文档index2.html加载到此HTML文档中。
到目前为止,我尝试过以下方法,但它并不完全符合我的要求。
文件1:scriptOrderTest.html
<html>
<div id ="content1"></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var variable1 = undefined;
$(document).ready( function() {
$.ajax({
url: "script1.js",
dataType: "script",
success: () => {
$.ajax({
url: "script2.js",
dataType: "script",
success: () =>{
// do the stuff you need
$("#content1").load("index2.html");
}
});
}
});
});
</script>
</html>
文件2:script1.js
console.log("Starting script 1");
function revealTime(){
console.log("Oh, I just wasted 5 seconds of my life")
}
//This script is just wasting time
setTimeout(revealTime,5000);
File3: script2.js
console.log("Starting script 2");
function revealTime(){
console.log("Oh, I just wasted 5 seconds of my life AGAIN") ;
variable1 = "Pizza";
}
//This script is just wasting time
setTimeout(revealTime,5000);
文件4:index2.html
<html>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
document.write("The variable is:"+variable1);
</script>
</html>
首先,我们的目标是等待脚本执行完毕,这样变量才能在页面上输出值。但以上代码并不满足这一条件。