javascript - 异步脚本无法访问

Question

我正在加载一个异步创建的脚本，以帮助防止网站速度变慢。我无法调用 Class.track({"some_param":"some_data"}) 类，因为它尚不可用。如何实现异步加载并具有调用类的能力？

在 js 中加载的代码如下，它发生在结束 body 标记之前，并且在其下面调用 Class.track。

<script type="text/javascript">

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

编辑

根据 Dan 的评论和 TJ 的答案，决定修改它，以下是我的想法，希望这对其他人有帮助。

<script type="text/javascript">
    var _Class = new function(){
        var items = [];

        this.track = function(type, params){
            params = params || {};
            items.push({"type":type, "params":params});
        }

        this.get = function(){
            return items;
        }

    };

    var Class = _Class;

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            s.onload = function(){
                var items = _Class.get();
                Class.trackBatch(items);
            };
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

Answer 1

在当前所有主要浏览器中，可以使用 script 元素的 onload:

s.onload = function() {
    /* ...this is called when the script is loaded, so `Class` should
       be available...
    */
    Class.track("page_view", {"page":"plans"});
};

在旧版本的 IE 中，您必须改用 onreadystatechange 并检查元素的 readyState 属性是否为字符串 "complete"。

当然，您也可以使用 setTimeout 或 setInterval 来轮询全局符号(Class，在您的情况下，我怀疑)您创建(通过 typeof，例如 if (typeof Class === "undefined") {/* ...在几毫秒内安排另一次检查... */}).