Async Javascript Uncaught TypeError: Object has no method 'test'

Question

我正在尝试创建我的第一个异步加载的 javascript 文件，但之后无法从对象调用函数。下面是我的示例 javascript 文件 exampletest.js...

(function(){
    var example = {
        test : function () {
            alert("test function called");
        }
    };
    window.example = example;
})();

然后我尝试使用以下代码调用此文件。

    (function(doc, example) {
            window.example = example;

            var script = doc.createElement("script");
            script.type = "text/javascript";
            script.async = true;
            script.src = "http://www.example.com/exampletest.js";

            var scriptTag = doc.getElementsByTagName("script")[0];
            scriptTag.parentNode.insertBefore(script, scriptTag);
    })(document, window.example || []);

    example.test();

当我运行这个脚本时，我收到错误“Uncaught TypeError: Object has no method 'test'”

如果我在页面加载后调用该方法，比如单击链接，则测试方法被正确调用，并且我得到了我的警告框。

我一直在四处寻找，试图更好地理解这一点，但到目前为止都没有运气。我试图更好地理解如何在没有方法“测试”的情况下调用函数。有没有办法在 javascript 加载后推送函数调用，而不会破坏调用本身，使其保持为 example.test();？

Answer 1

在调用之前检查函数是否存在。

试试这个：

if (typeof example.test == function){
    example.test();
}

注意：由于 JavaScript 是异步加载的，window.onload 将不起作用。

更新

拥有async 的全部目的是在不等待脚本加载的情况下加载页面。你不能两者兼得。

这行不通

<script src="exampletest.js"  async ></script>

<script type="text/javascript">
    example.test();
</script>

但这会起作用，因为执行会等待文件加载

<script src="exampletest.js" ></script>

<script type="text/javascript">
    example.test();
</script>