1

私は Stack Overflow が初めてで、HTML5 プログラミングも比較的初めてです。Webkit アニメーションの完了時に発生するイベントによってロジックが駆動される (主に Safari 用の) 何かを書いています。同じ長さの多数のアニメーションを同時に開始する場合、それらの完了イベントが発生すると予想される順序についてのアイデアが必要です。例：

<!DOCTYPE html>
<html>
<head>
    <style>
    @-webkit-keyframes slideRight {
        from { left: 0; }
        to { left: 100px; }
    }
    </style>
</head>
<body>
    <script type="text/javascript">

    var square = function(yPos, color){
        var myDiv = document.createElement("div");
        myDiv.style.width = "20px";
        myDiv.style.height = "20px";
        myDiv.style.top = yPos + "px";
        myDiv.style.backgroundColor = color;
        myDiv.style.position = "absolute";

        document.body.appendChild(myDiv);

        var squareInterface = {

            onAnimEnd: function(event){
                console.log(myDiv.style.backgroundColor + " square finished animating");
            },

            startAnim: function(){
                myDiv.style.webkitAnimationName = "slideRight";
                myDiv.style.webkitAnimationDuration = "2s";
                myDiv.addEventListener('webkitAnimationEnd', this.onAnimEnd);
            }
        }

        return squareInterface;
    }

    var myRedFoo = square(0, "red");
    var myBlueFoo = square(30, "blue");

    myRedFoo.startAnim();
    myBlueFoo.startAnim();
    </script>
</body>
</html>

そこで、JavaScript で赤い四角と青い四角を作成し、(Safari と Chrome で) アニメーションを開始して右に移動し、完了したらコンソールに出力します。青い四角は、アニメーションが終了したことを常に最初に示します。遊んでみると、アニメーションが開始された順序や正方形の位置とは関係がないように見えますが、それらが作成された順序です。「同時」イベント コールバックは、最も最近作成された要素で最初に発生し、その後に古い要素が続くようです。

私の質問は、この動作に頼ることができますか? 何かの規格で保証されているのですか、それともブラウザや月の満ち欠けによって変わる可能性はありますか? イベントの順序を保証できない場合、それに対処するためにどのような戦略をお勧めしますか?

4

1 に答える 1

0

これはおそらくシステムに依存していると言えます。私は OSX Lion を使用しています。Chrome と Safari の両方で、「赤」のイベントが「青」のイベントの前にログに記録されます。

タイミングをより確実にするためにハックしたい場合は、次のようにします。

function startRedFoo(){ myRedFoo.startAnim() };
myBlueFoo.startAnim();
setTimeout(startRedFoo, 10); //Ten is as small as you can go.

タイムアウト機能を に設定できると思うかもしれませんが、それではmyRedFoo.startAnimメッセージがログに記録されません。

ただし、これで潜在的なタイミングの問題が発生する可能性があることはまだ想像できるので、絶対確実ではありません。

于 2011-07-25T23:36:25.697 に答える