js的加载和执行顺序问题

Question

直接上代码

这是一个文件

以下是a1.js

setTimeout(function(){
    alert('这里是a1.js');
}，2000)

以下是a2.js

alert('这里是a2.js');

这是另一个文件

以下是b1.js

var 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.js

var 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

setTimeout()函数是异步的，所谓异步，就是这里面调用的代码将会存起来，把下面的运行完了再去运行这一段。所以你会看到第二个弹窗先弹出来alert()弹窗会暂停js进程的运行，直到你把它取消掉。js是单进程的，所以绝对没有什么同时。你的第二个文件虽然用了两个setInterval，但都是延迟20毫秒，所以，它的运行顺序是，先运行b1，保存setInterval中调用的代码，再运行b2，同样保存setInterval中调用的代码，然后运行b1保存的异步代码代码，最后运行b2保存的异步代码代码。js中改变了网页结构，这并不意味着网页马上就会重新绘制。js进程和网页UI进程不会同时运行，网页绘制会发生在js进程完毕之后。然后，我其实并没有看出来关于第二个文件你想问什么，只是随便说了说。