javascript - 如何知道动态添加的脚本是否被解析/加载/执行？

Question

我正在尝试动态加载一个 JavaScript 文件，并在加载后运行该文件中的一个函数。在我的主要 HTML 中，我基本上有:

function load_javascript(js_file)
{
    function load_js_callback(example)
    {
        console.log("function " + function_in_js_file + " is " + typeof(function_name));
        if (typeof(function_in_js_file) == "undefined")
        {
            window.setTimeout(load_js_callback(example), 500);
            return false;
        }
        function_in_js_file(example);
    }

    var jstag = document.createElement("script");
    document.head.appendChild(jstag);

    // Browsers:
    jstag.onload=load_js_callback("example");
    // Internet Explorer:
    jstag.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            load_js_callback("example");
        }
    }
    jstag.setAttribute('src',js_file);
}

load_javascript("/js/example.js");

根据我在互联网上找到的内容(https://stackoverflow.com/a/3248500 和 https://stackoverflow.com/a/16231055)，这应该可以工作，但是 jstag.onload 在定义 function_in_js_file 之前运行，所以我需要 window.setTimeout 再次检查，直到函数被定义。

理想情况下，我想摆脱那个超时。有什么方法可以知道文件何时完成加载/解析/执行(我不确定哪个是正确的术语)并且定义了函数，理想情况下不更改动态文件？我还尝试将 document.head.appendChild(jstag); 放在 jstag.setAttribute 之后，但结果相同。

Answer 1

它在脚本加载之前运行的原因是:

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=load_js_callback("example");

正在将load_js_callback的返回值赋值给jstag.onload。 onload 处理程序需要一个函数:

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=function() { load_js_callback("example"); };

正如其他评论中所指出的，所有这些保证是浏览器已经下载了脚本。