关于JavaScript的异步加载问题

Question

这样引入一个JavaScript：

<script type="text/javascript" async src="//somedomain.com/somefile.js"></script>

这里用到了async，在使用这个脚本的时候，如果同时执行其它操作，如：

$("div.foo").click(function(){
  // 1. 运行和引用的somefile.js有关的事件
  // 2. 窗体跳转
});

在这个过程中，期待按顺序执行1和2，实际上却是有时先执行1，有时先执行2，这个异步加载如何处理能达到希望的效果呢？

Answer 1

用jquery.getscript, script加载后的逻辑 写入回调函数。 自己读文档吧：
http://api.jquery.com/jquery.getscript/

Answer 2

简单的做法是建议考虑在script载入完成后再绑定。

<script type="text/javascript" async src="//somedomain.com/somefile.js" onload="bindClick"></script>

function bindClick(){
  $("div.foo").click(function(){
    // 1. 运行和引用的somefile.js有关的事件
    // 2. 窗体跳转
  });
}

Answer 3

在比较复杂的系统里，通常采用模块化开发，比如你的somefile.js就作为一个模块，在文件内部暴露某些方法和变量，然后在somefile.js模块加载完成后进行相关操作。以sea.js为例：
somefile.js:

define(function(require, exports, module) {
        exports.foo = function() { //暴露foo方法
            //todo
        };
});

index.html:

其实现原理和一楼说的基本类似，另外，如果你关注js的执行顺序，同时又不希望js下载时阻塞html的解析，那么可以使用defer而非async，这两者的区别可以参考以下网址：http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/