javascript - 执行动态加载的JS文件

Question

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

Answer 1

脚本加载完成后，会尽快执行。也就是说，如果某些其他 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 函数。