为什么将我的 JavaScript 库包装在匿名函数中修复了我的竞争条件？

Question

问题：为什么将我的 JavaScript 库包装在匿名函数中可以修复我的竞争条件？

注意：我也对同步和异步加载外部 JavaScript 资源的好解决方案的评论感兴趣。

我正在从事一个涉及使用 crossrider 编写浏览器扩展的项目。如果您不熟悉使用 JavaScript 实现的跨骑手扩展，那么您有一个可以与应用程序页面通信的背景页面。应用页面可以与每个打开的选项卡一起运行，并且可以操作 DOM。我计划在用户请求打开时远程加载大部分扩展代码。最近，当我向页面referencing Raphael 添加脚本标签时遇到了竞争条件，然后我构建了out of graffle

据我了解，如果页面加载时已经存在这些脚本标签，那么执行将同步进行，尽管由于我附加了脚本标签，因此执行是异步进行的。这是大多数人似乎遇到的相反问题。搞砸了它，我了解到将我的代码 graffle 代码包装在一个匿名函数中修复了我的竞争条件。为什么？我在wrapping whole Javascript files in anonymous functions 上阅读了这篇文章，这似乎与比赛条件无关。

我的电话号码：

var scriptsToLoad   = [ "http://example/Scripts/lib/raphael.js",
                "http://example/Scripts/lib/graffle.js",
                "http://example/Scripts/lib/log4javascript.js"];

for(var i in scriptsToLoad) {
    (function(){
        $("head")
            .append($("<script></script>")
                .attr("type", "text/javascript")
                .attr("src", scriptsToLoad[i]));
    })()
}

Answer 1

关于您的问题，我认为没有为 <script /> 标签的加载和评估顺序设置任何特定标准；很容易引入竞争条件。

关于 (a) 同步脚本加载，使用 jQuery，请执行以下操作：

var scriptsToLoad = [
    "http://example/Scripts/lib/raphael.js",
    "http://example/Scripts/lib/graffle.js",
    "http://example/Scripts/lib/log4javascript.js"
];

$.each(scriptsToLoad, function (index, script) {
    $.ajax({
        url      : script,
        async    : false,
        dataType : 'script'
    });
});