javascript - <script> 动态脚本加载问题 - 奇怪的行为

Question

我遇到了一个很难重现的奇怪问题，但我会尽力解释。

我有一个 setup.js 文件，其中包含要由主脚本添加到文档的脚本参数，如下所示:

{
    script1: true,
    script2: true,
    script3: false
}

我有一个主脚本文件，我们称它为 ma​​in.js，它主要检查设置文件，然后针对每个“true”执行以下操作:

var element = document.createElement('script');
element.src = "path/to/file.js"
document.getElementsByTagName('body').appendChild(element);

现在我已经使用 console.log 检查了，ma​​in.js 文件必须一直执行到最后，直到添加到主体的任何文件开始加载，但是它们随后会被一个接一个地加载，并且应该可以使用了。

棘手的部分来了

我需要知道它们何时完成加载，以便能够在 ma​​in.js 文件的其余部分使用它们的功能，因此我需要某种“onload”处理程序.我尝试将 addEventListener('load', function(){}) 附加到添加的最后一个元素，并且成功了。

然而.....

一旦我将事件监听器函数更改为如下内容:

addEventListener('load' function(){
    script1Function(); //Which is defined in script1
    script2Function(); //Which is defined in script2
}

它开始抛出诸如“script1Function is not defined”之类的错误。我知道此时两个脚本都已加载，因为我做了一个 console.log("I have loaded") 作为每个脚本的最后一行，并且它们出现在控制台中，但它是无法使用这些文件中定义的函数定义。

更重要的是......如果我改为执行以下事件处理程序:

addEventListener('load' function(){
    alert("Last script loaded"); //This line was ADDED
    script1Function(); //Which is defined in script1
    script2Function(); //Which is defined in script2
}

这一切突然都奏效了。添加“警报(“随便”)；”允许我使用文件中定义的功能......我认为它与“我需要在警报对话框上单击“确定”的时间......但整个事情没有意义，因为我知道函数是在我调用它们时定义的。

Answer 1

/*
    Example usage:
    importAsync(["script1.js", "script2.js", "script3.js"]);

    waitUntil(function() {
        return ((typeof(script1Function) !== "undefined")
                && (typeof(script2Function) !== "undefined")
                && (typeof(script3Function) !== "undefined"));
    });
 */
function waitUntil(testFunc) {
    var start = Date.now();
    var timeout = 3000;

    do {
        if((Date.now() - start) > timeout) {
            console.log("waitUntil() timed out");

            return false;
        }
    } while(!testFunc());
}

这就是我在评论中的意思。我将您的注意力引向函数上方的示例:

importAsync(["script1.js", "script2.js", "script3.js"]);

waitUntil(function() {
    return ((typeof(script1Function) !== "undefined")
            && (typeof(script2Function) !== "undefined")
            && (typeof(script3Function) !== "undefined"));
});

importAsync 是您用于加载 .js 文件的任何函数/方法 - 它不相关。

相关的是 waitUntil 和您传递给它的函数。在上面的示例中，我检查了所有三个脚本中的函数是否存在(因此:不等于未定义)并且由于 do..while 的性质，只有这样才会继续执行脚本环形。正如我在评论中也提到的那样，您需要在 do..while 循环上设置超时以防止无限循环。如果愿意，您也可以向 waitUntil 添加一个超时参数。

我希望这能让你对我在评论中的意思有一个基本的了解，如果你有任何进一步的问题，请开火!