2

我是 javascript 新手，观察到 body 标记中的 2 个函数 onload="expand();fadeOut();" 在链接 http://jsfiddle.net/ankur3291/F8pXj/6/上是串行的，所以必须一个一个地执行，但是当看到结果时，这两个函数似乎同时运行。为什么会这样？他们为什么不一个一个地依次执行？（请不要尝试更新指定链接的代码......因为链接会改变）另见下面的代码：

<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>
4

2 回答 2

3

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

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

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

于 2013-07-07T22:13:00.727 回答
0

您的函数调用确实连续执行。但是，它们都执行第一次迭代，设置间隔并退出，因此第二次和后续迭代都将由您的计时器调用，并且看起来是同时执行的。如果您想连续执行，则在第一个计时器计数结束后从第一个函数调用第二个函数。

于 2013-07-07T22:16:08.490 回答