前几天笔试某公司有这样一道题。编写一个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);
11.js
console.log("这是11.js被执行");
12.js
console.log("this is 12.js ");
现在让我们看一下运行结果：
先看一下我们调用函数的顺序
loadScript(url1,back1);
hello();
loadScript(url2,back2);
如果按照同步执行的话我们猜测的寻常结果应该是：
在appendchild之后xx.js执行
back1回调函数被执行
hello world!这是一个普通的同步函数
在appendchild之后xx.js执行
back2回调函数被执行
当然，结果不可能这样，因为我们采取了异步。
xx.js会在appendChild执行之后异步加载执行。
看一下运行结果思考一下异步吧~~