Question

我有一个很难重新创建的奇怪问题，但我会尝试尽我所能解释。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  {＆＃xA; script1：true，＆＃xA; script2：true，＆＃xA; script3：false＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

我有一个主脚本文件，我们称之为 main.js 它基本上检查设置文件，然后对于每个“true”执行以下操作：

＆＃xA;＆＃xA;

  var element = document.createElement（'script'）;＆＃xA ; element.src =“path / to / file.js”＆＃xA; document.getElementsByTagName（'body'）。appendChild（element）;＆＃xA;

＆＃xA;＆＃ xA;

现在我已经使用console.log进行了检查，并且 main.js 文件是必须一直执行到最后的文件，直到任何文件添加到正文中开始加载，然后逐个加载，然后就可以使用了。

＆＃xA;＆＃xA;

现在这里是棘手的部分

＆＃xA;＆＃xA;

我需要知道所有这些都已完成加载，以便能够在 main.js 文件的其余部分中使用它们的功能，所以我需要某种“onload”处理程序。我试图将 addEventListener（'load'，function（）{}）附加到最后添加的元素，并且它有效。

＆＃xA;＆＃xA;

然而.....

＆＃xA;＆＃xA;

一旦我更改了事件监听器功能例如：

＆＃xA;＆＃xA;

  addEventListener（'load'function（）{＆＃xA; script1Function（）; //这是在script1＆＃xA中定义的; script2Function（）; //在script2＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

中定义它开始抛出错误，例如“script1Function未定义” 。＆＃xA;我知道这两个脚本都已加载，因为我做了 console.log（“我已经加载”）作为每个脚本的最后一行，而那些出现在控制台，但不能使用这些文件中定义的功能定义。

＆＃xA;＆＃xA;

更多...... 如果我改为执行以下事件处理程序：

＆＃xA;＆＃xA;

  addEventListener（'load'function（）{＆＃xA; alert（“Last script loaded”）; //这一行是ADDED＆＃xA; script1Function（）; //这是在script1＆＃xA; script2Function（）中定义的; //这是定义的在script2＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

一切都突然起作用。＆＃xA;添加“alert（”what“）;”允许我使用文件中定义的函数....我认为它与“在警报对话框中单击”确定“所需的时间有关...但是整个事情没有意义，因为我知道函数是在我调用它们的时候定义的。

＆＃xA;

Answer 1

prepare-package

这就是我在评论中的意思。我将注意力集中在函数上面的例子中：

/*
    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是你加载.js文件的任何函数/方法 - 它不相关。

相关的是 waitUntil 以及您传递的功能。在上面的示例中，我检查是否存在来自所有三个脚本的函数（ergo：不等于undefined），仅将继续执行脚本，因为do..while的性质环。正如我在评论中提到的那样，你需要在do..while循环上超时以防止无限循环。如果你愿意的话，你也可以为waitUntil添加一个参数。

我希望这能让您对评论中的含义有一个基本的了解，如果您有任何其他问题，请离开！

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

现在这里是棘手的部分

1 个答案: