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. awaits 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屋！
