此 Funnelytics 代码是否包含竞争条件？答案

【问题标题】：Does this Funnelytics code contain a race condition?此 Funnelytics 代码是否包含竞争条件？
【发布时间】：2018-11-25 06:16:42
【问题描述】：

我正在研究我遇到的跟踪脚本。这是 Funnelytics 的一个。乍一看，它似乎有一个错误：

(function(funnel) {
    var insert = document.getElementsByTagName('script')[0],
        script = document.createElement('script');
    script.addEventListener('load', function() {
        window.funnelytics.init(funnel, false);
    });
    script.src = 'https://cdn.funnelytics.io/track.js';
    script.type = 'text/javascript';
    script.async = true;
    insert.parentNode.insertBefore(script, insert);
})('8889dbc2-6c2f-5ba4-c201-dc8889dbc26c');

难道load触发的函数会在异步脚本track.js执行之前被调用？在这种情况下，window.funnelytics.init 行不会失败，因为window.funnelytics 尚未定义？

【问题讨论】：

标签： javascript browser deferred-execution dynamic-script-loading

【解决方案1】：

此代码不包含竞争条件。请注意，事件侦听器附加到 script 元素，而不是 window 对象：

script.AddEventListener('load', function() { // ...

只有在脚本加载并执行后才会调用此函数。

即使事件侦听器已附加到 window 对象，此代码仍不会包含竞争条件。只有在所有window 的子资源都加载并执行后，该函数才会被调用，包括动态插入的任何async 脚本，就像这里发生的那样。

【讨论】：