Question

我是javascript的新手并观察到body标签中的2个函数onload =“expand（）; fadeOut（）;”在链接http://jsfiddle.net/ankur3291/F8pXj/6/处于序列顺序，因此必须逐个执行，但是当看到结果时，似乎两个函数同时运行。为什么会这样？为什么不连续逐个执行？（plz不要尝试更新指定链接的代码....因为链接会改变）另请参阅以下代码：

<html>
<head>
<title>dimensions</title>
<style type='text/css'>
body{margin:0;}
.box{display:block;background-color:green;}
#container{height:100px;width:100px;position:relative;top:150px;left:150px;}
#contain{display:block;position:fixed;height:200px;width:200px;top:100px;left:100px;font-size:50px;t

ext-align:center;line-height:200px;opacity:0;background-color:orange;}
</style>
<script type='text/javascript'>

function expand(){
    var obj=document.getElementById("container");
    var h=100
    var w=100
    var t=150
    var l=150       

    function frame()
    {    
        t=t-2;
        l=l-1.97*2;
        h=h+4;
        w=w+1.96*4;

            obj.style.height=h+'px';
        obj.style.width=w+'px';
        obj.style.top=t+'px';
        obj.style.left=l+'px';

        if(t<=5 || l<=5)
            clearInterval(timer);
    }
    var timer=setInterval(frame,1);
}
function fadeOut(){
    var obj=document.getElementById("contain");
    var o=0;
    function frame(){
        obj.style.opacity=o;
        o=o+0.01;
        if(o>=1)
            clearInterval(timer);
    }
    var timer=setInterval(frame,1);
}
</script>
</head>
<body onload="expand();fadeOut();">
<div class="box" id="container">
</div>
<div id="contain">
 Unicorn
</div>
</body>
</html>

Answer 1

这是由于setInterval的工作方式。这两个函数都设置了一个每毫秒调用一次的间隔（虽然它很可能实际上不那么频繁地被调用）。

在您的示例中，两个函数都使用setInterval计划其更新函数的运行。 body标签的onload属性中定义的函数按顺序调用;然而，将动画分块成小块使它看起来像看起来像是并行运行，但由于JavaScript固有的单线程特性，这种情况从未如此。

作为一个非常宽泛的经验法则，您可以将其工作方式与单线程进程调度程序进行比较，该调度程序可以非常快速地在多个进程之间切换。只有一个进程在任何给定时刻运行，但频繁更改活动进程会产生并行性错觉。

Answer 2

您的函数调用会连续执行。但是，它们都执行第一次迭代，设置Interval并退出，因此第二次和后续迭代都将由您的计时器调用，并且似乎同时执行。如果你想要连续执行，那么在第一个计时器计数完毕后，从第一个函数调用第二个函数。

功能一个接一个的顺序在javascript中同时工作

2 个答案: