javascript - 如何在尚未加载的异步 Javascript 中使用函数？ (作为 Google Analytics 的 ga 功能)

Question

我开发了一个需要在页面中异步加载的库。我的脚本加载:

<script type="text/javascript">
  (function(w,d) {
    var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'my_function-sdk.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })(window, document);
</script>

我想使用下面的函数:

<script>
      my_function("test");
</script>

或者点击一下:

<a href="#" onclick="my_function('other test');">test click</a>

文件my_function-sdk.js中的函数定义:

function my_function(param) {
  console.log("in correct function");
  console.log(param);
}

我希望 console.log 打印“在正确的函数中”如何在文件 my_function-sdk.js 上的函数中定义。

JSFiddle:https://jsfiddle.net/adrianogodoy/n7ahygoj/8/

编辑:我想像 Google Analytics 一样，在加载脚本或任何其他地方立即使用 ga 函数，而不会收到未定义错误:

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXX-1', 'auto');
    ga('send', 'pageview');
</script>

Answer 1

无论脚本是否加载，您都在执行my_function。您可以创建一个 onload/onreadystatechange 事件处理程序，该处理程序将在脚本加载后执行回调函数:

po.onload = po.onreadystatechange = function() { my_function("text") };