前几天笔试某公司有这样一道题。编写一个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执行之后异步加载执行。
看一下运行结果思考一下异步吧~~
时间： 2024-10-23 17:50:25