一个小例子理解js异步加载

浏览数：64 / 时间：2015年06月09日

前几天笔试某公司有这样一道题。编写一个javascript函数，可以在页面上异步加载js，在加载结束后执行callback,并在IE和chrome下可以执行。

就这个题我写了一个DOM方法异步加载js的例子，可以给对于异步不了解的朋友参考感受一下。

众所周知，js是一种单线程的语言，它的Event Loop机制可以看一下阮一峰的这篇博客，讲解的很好

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

下面看一下我写的例子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>js异步加载</title>
 5     <meta charset ="UTF-8">
 6 </head>
 7 <body>
 8 
 9 </body>
10  <script type="text/javascript" src="js/call.js"></script>
11 </html>

在html的<script>标签里面的代码或者src引用的文件中的代码都是同步加载的。例子里面call.js就是同步加载。

call.js

 1 function loadScript(url, callback) {
 2     var script = document.createElement("script")
 3     script.type = "text/javascript";
 4     if (script.readyState) { //IE 
 5         script.onreadystatechange = function() {
 6             if (script.readyState == "loaded" ||
 7                 script.readyState == "complete") {
 8                 script.onreadystatechange = null;
 9                 callback();
10             }
11         };
12     } else { //Others: Firefox, Safari, Chrome, and Opera 
13         script.onload = function() {
14             callback();
15         };
16     }
17     script.src = url;
18     console.log("在appendchild之后xx.js执行");
19     document.body.appendChild(script);
20 }
21 var url1 = ‘js/11.js‘;
22 var url2 = ‘js/12.js‘;
23 function back1(){
24     console.log("back1回调函数被执行");
25 }
26 function back2(){
27     console.log("back2回调函数被执行");
28 }
29 function hello(){
30     console.log("hello world!这是一个普通的同步函数");
31 }
32 loadScript(url1,back1); 
33 hello();
34 loadScript(url2,back2);