HTML在另一个脚本完成执行后加载一个脚本 [英] HTML load one script after another script completes execution
问题描述
在HTML文件中,我具有以下脚本:
In a HTML file, I have the following scripts:
<head>
<script src="/script1.js" defer></script>
<script src="/script2.js" defer></script>
</head>
在 script1
中,我正在加载另一个HTML文件:
In script1
, I am loading another HTML file:
(async function() {
await fetch("./header.html")
.then(response => { return response.text() })
.then(data => { document.getElementById("header").innerHTML = data; });
})()
script2
中的代码使用 script1
加载的 header.html
中的元素.使用当前代码, script2
不会等待完全提取 header.html
.
The code in script2
uses the elements from header.html
which is being loaded by script1
. With the current codes, script2
doesn't wait for header.html
to be completely fetched.
一个证明是,我在获取 script1
后添加了 console.log("1")
,并添加了 console.log("
.即使在HTML文件中,我先调用 script2
"开头的"2") script1
,然后调用 script2
,但是 console.log('2')
出现在 console之前.log('1')
A proof of this is that I have added console.log("1")
after the fetch of script1
, and added console.log("2")
at the beginning of script2
. Even though in the HTML file, I am calling script1
then script2
, but console.log('2')
appears before console.log('1')
因此导致 script2
读取一些空元素(尚未呈现).我正在尝试确保在运行 script2
之前完成 script1
的执行(从而完成提取操作).我该怎么办?
Thus causing script2
to read some null elements (which have not been rendered yet). I am trying to ensure that script1
finishes executing (thus the fetch operation finishes) before running script2
. How should I do this?
推荐答案
await
不会阻止整个脚本的执行. await
只是将诺言隐藏在具有同步外观的构造中.当标记为 async
的函数中满足 await
时,将执行 await
之后的表达式(通常是函数调用),但是返回值为没有在 async
函数中等待.相反,标有 async
的函数将暂停,并且从调用 async
函数的位置继续执行,然后执行脚本的其余部分(也许还有其他脚本),直到承诺被履行,然后脚本执行恢复到 async
函数,并从 await
运算符最初暂停异步
功能.
await
doesn't block the execution of the entire script. await
s are just hiding promise(s) into a synchronous-looking construction. When await
is met in a function marked as async
, the expression following await
, often a function call, is executed, but the return value is not waited inside the async
function. Instead, the function marked with async
is paused, and the execution continues from the point the async
function was called, and the rest of the script is executed (and perhaps also other scripts), until the promise is fullfilled, Then the script execution resumes to the async
function, and continues from the next statement after the statement where await
operator originally paused the async
function.
您可以使用这样的承诺:
You can use a promise like this:
在脚本1中:
const headerHtml = new Promise((resolve, reject) => {
fetch("./header.html")
.then(response => response.text())
.then(data => {
document.getElementById("header").innerHTML = data;
resolve();
});
});
在脚本2中:
headerHtml.then(() => {
// Now header.html is fully loaded
// Do what you need to do with the new elements
});
即使在script2(或一般情况下,在任何地方)设置 then
处理程序之前已经完全解析了 fetch
的情况下,此操作仍然有效,因为"如果当附加了相应的处理程序时,promise已被履行或拒绝,该处理程序将被称为""
This will work even when fetch
would had been completely resolved before then
handler is set in script2 (or anywhere in general), because "If the promise has already been fullfilled or rejected when a corresponding handler is attached, the handler will be called"MDN.
这篇关于HTML在另一个脚本完成执行后加载一个脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!