2

私はJavaScriptを初めて使用し、ボディタグの2つの関数が onload="expand();fadeOut();" であることを確認しました リンク http://jsfiddle.net/ankur3291/F8pXj/6/はシリアル順であるため、1つずつ実行する必要がありますが、結果を見ると、両方の機能が同時に実行されているようです。なぜそうなのですか？1つずつ順番に実行しないのはなぜですか? （指定されたリンクのコードを更新しようとしないでください....リンクが変更されるため）以下のコードも参照してください。

<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 固有のシングル スレッドの性質によるものではありません。

非常に大まかな経験則として、これが機能する方法を、複数のプロセスを非常に迅速に切り替えるシングルスレッドのプロセス スケジューラと比較することができます。常に 1 つのプロセスのみが実行されますが、アクティブなプロセスが頻繁に変更されるため、並列処理の錯覚が生じます。

于 2013-07-07T22:13:00.727 に答える
0

関数呼び出しは連続して実行されます。ただし、どちらも最初の反復を実行し、間隔を設定して終了するため、2 回目以降の反復は両方ともタイマーによって呼び出され、同時に実行されているように見えます。連続して実行したい場合は、最初のタイマーがカウントアウトした後、最初の関数から 2 番目の関数を呼び出します。

于 2013-07-07T22:16:08.490 に答える