phpstudy集成环境

 首页 > js的加载和执行顺序问题

js的加载和执行顺序问题

直接上代码

这是一个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="a1.js"></script>
    <script type="text/javascript" src="a2.js"></script>
</body>
</html>

以下是a1.js

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

以下是a2.js

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

这是另一个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript" src="b1.js"></script>
    <script type="text/javascript" src="b2.js"></script>
</body>
</html>

以下是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确实同时增加宽高(至少在我肉眼里面是同时)
说了这么多都感觉语无伦次了 我只想问 在这种平常的情况下 浏览器是怎么加载和执行这几个文件的顺序的 有点蒙

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

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

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

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

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

加载顺序就是从上往下顺序加载，遇到异步方法就使用异步处理。
第一个没有弹出来是不是因为你的方法里使用了中文的逗号？还有一点alert是阻塞的，javascript是单线程的，alert不关闭后面什么也执行不了。

没明白说的什么意思，只发现a1.js里面2000前面的逗号是中文的.

【热门文章】
【热门文章】