动态加载的JavaScript在完全加载JS文件之前开始执行

Question

我正在动态地添加带有以下功能的脚本：

function loadScript(scriptUrl) {
    const body = this.document.getElementsByTagName('body')[0];
    const script = this.document.createElement('script');
    script.id = elmName;
    script.src = `${scriptUrl}`;
    script.async = false;
    script.defer = true;
    script.onload = () => {console.log("LADEDED: " + scriptUrl);}
    body.appendChild(script);
}

加载的脚本呼叫函数在它们之后定义。当我通常添加到HTML时，它们运行良好。但是，如果我使用上述功能动态添加脚本，则它给出了未定义的错误，用于调用呼叫后定义的呼叫函数。

随着登录动态脚本负载，我看到（动态添加的）脚本在完全加载文件之前就开始执行。因此，未定义的错误是在“加载：”日志之前出现的。

我试图关闭异步加载，然后推迟。仍然同样的问题。

编辑：

延期现在有效。脚本按顺序加载。然而，未定义的错误仍在继续。

jQuery(...).hover3d is not a function

Hover3D在同一文件中定义了错误。

Answer 1

我在评论中解释了所有内容，所以首先阅读

// make normal function to arrow function according es6 syntax 
const loadScript = (URL, elemName) => {
      // return a promise to handle time error
      return new Promise((res, rej) => {
        // try and catch block to handle any kind of err
        try {
          // create a script element
          const script = document.createElement("script");
          // a simple way to set attributes according to me
          Object.assign(script, {
            id: elemName,
            src: URL,
          });
          // whenever the script load this function will fire and resolve promise until .then will not fire so add function never call before.
          script.addEventListener("load", () => res(`Loaded: ${URL}`));
          // append script into body
          document.body.appendChild(script);
        } catch (err) {
          // reject promise with err
          rej(err);
        }
      });
    };
    loadScript("./math.js", "mathScript").then(() => {
      // call add function from another script
      add();
    });

我不确定它会起作用！
谢谢你！