1

我是 Stack Overflow 的新手，对 HTML5 编程也比较陌生。我正在写一些东西（主要是为 Safari），其中逻辑是由 webkit 动画完成时触发的事件驱动的。如果我同时启动多个相同长度的动画，我需要了解它们的完成事件触发的顺序。例子：

<!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 回答