js的加载和执行顺序问题

Question

直接上代码这是一个文件以下是a1.jssetTimeout(function(){     alert('这里是a1.js'); }，2000)以下是a2.jsalert('这里是a2.js');这是另一个文件以下是b1.jsvar oDiv = document.getElementById('box');var num1 = 0;var timer1 = null; timer1 = setInterval(function(){     num1++;     oDiv.style.width = num1 + 'px';    if(num1 == 200){         clearInterval(timer1);     } },20)以下是b2.jsvar oDiv = document.getElementById('box');var num2 = 0;var timer2 = null; timer2 = setInterval(function(){     num2++;     oDiv.style.height = num2 + 'px';    if(num2 == 200){         clearInterval(timer2);     } },20)我的疑问是 为什么第一个文件是先弹窗弹出第二个js的内容 且另一个弹窗为什么一直没弹出来 而且 当我过了2秒把第一个弹出来的弹窗点确定取消后 为什么还要等2秒 另一个弹窗会弹出来 但第二个文件的div确实同时增加宽高(至少在我肉眼里面是同时)说了这么多都感觉语无伦次了 我只想问 在这种平常的情况下 浏览器是怎么加载和执行这几个文件的顺序的 有点蒙

Answer 1

1. setTimeout()函数是异步的，所谓异步，就是这里面调用的代码将会存起来，把下面的运行完了再去运行这一段。所以你会看到第二个弹窗先弹出来

2. alert()弹窗会暂停js进程的运行，直到你把它取消掉。

3. js是单进程的，所以绝对没有什么同时。你的第二个文件虽然用了两个setInterval，但都是延迟20毫秒，所以，它的运行顺序是，先运行b1，保存setInterval中调用的代码，再运行b2，同样保存setInterval中调用的代码，然后运行b1保存的异步代码代码，最后运行b2保存的异步代码代码。

4. js中改变了网页结构，这并不意味着网页马上就会重新绘制。js进程和网页UI进程不会同时运行，网页绘制会发生在js进程完毕之后。

5. 然后，我其实并没有看出来关于第二个文件你想问什么，只是随便说了说。