执行动态脚本后执行代码答案

【问题标题】：Execute code after dynamic scripts have executed执行动态脚本后执行代码
【发布时间】：2020-07-03 02:39:10
【问题描述】：

这是我获取 .html 文件并提取所有标签的代码：

const loadApp = async () => {
    try {
        const entries = await axios.get(`http://.../index.html`);
        let domParser = new DOMParser();
        let tempDOM = domParser.parseFromString(entries.data, 'text/html');
        tempDOM.querySelectorAll('script').forEach(script => {
            if (script.src) {
                const scriptElement = document.createElement("script");
                scriptElement.src = script.src;
                scriptElement.async = false;
                document.body.appendChild(scriptElement);
            }
        });
        console.log('Hello');
    } catch (error) {
        throw error;
    }
};

我如何确保console.log('Hello') 将在上述所有脚本执行后运行？以上代码确实保证执行顺序与取订单？

【问题讨论】：

相信console.log会在上面的脚本之后执行。您甚至可以在 axios 调用中等待。目前如何执行？
@JunmarCalimbasJose 我相信OP指的是在执行console.log('hello');之前等待脚本的内容加载到页面中@

标签： javascript async-await axios

【解决方案1】：

我相信您想要的是在scriptElement 上添加一个事件侦听器来侦听“加载”事件。像这样的：

const loadApp = async () => {
    try {
        const entries = await axios.get(`http://.../index.html`);
        const domParser = new DOMParser();
        const tempDOM = domParser.parseFromString(entries.data, 'text/html');
        const scriptLoadPromises = tempDOM.querySelectorAll('script').map((script) => new Promise((resolve) => {
            if (script.src) {
                const scriptElement = document.createElement("script");
                scriptElement.src = script.src;
                document.body.appendChild(scriptElement);
                scriptElement.addEventListener("load", resolve);
            }
            else {
                resolve();
            }
        }));
        await Promise.all(scriptLoadPromises);
        console.log('Hello');
    } catch (error) {
        throw error;
    }
};

这应该等待所有其他脚本加载，然后再继续执行您的 console.log('hello'); 行。

【讨论】：