执行动态加载的JS文件

我理解JS是单线程、同步执行的。因此，当我将文件添加到浏览器头标记时，该文件一遇到就会执行。然后它转到下一个脚本标记并执行该文件。我的问题是当我将 js 文件动态添加到 HTML head 标记时。浏览器如何执行该文件？ 是不是像当前执行的地方只要文件加载完就执行该文件。或者我们可以控制该文件的执行方式吗？

当脚本加载后，它会尽快执行。也就是说，如果其他一些 JavaScript 函数正在执行，比如点击处理程序或其他函数，那么它将被允许首先完成 - 但这是给定的，因为正如你所说，在浏览器中 JavaScript 通常在单个线程中执行。

您无法控制脚本加载的那部分，但您可以使用此模式 - 很大程度上受到 JSONP 的启发：

插入的脚本：

(function () {
    var module = {
        init: function () {
            /* ... */
        }
    }

    ready(module);  // hook into "parent script"
}());

主页上的脚本：

function ready(o) {
    // call init in loaded whenever you are ready for it...
    setTimeout(function () { o.init(); }, 1000);
}

这里的关键是ready在您的页面上定义并从您动态插入的脚本中调用的函数。脚本不会立即开始行动，只会告诉父页面它已加载，然后父页面可以回调插入的脚本init每当它想要开始执行时函数。