CSS3 webkitAnimationEnd упорядочение событий

Я новичок в stackru, а также относительно новичок в программировании на 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) запускаю анимации, чтобы переместить их вправо и распечатать на консоли, когда они будут готовы. Синий квадрат всегда первым говорит о том, что он закончил анимацию. Кажется, что от игры вокруг не имеет ничего общего с порядком запуска анимаций или положением квадратов, а с порядком их создания. "Одновременные" обратные вызовы событий, по-видимому, происходят сначала в самом последнем созданном элементе, за которым следуют более старые элементы.

У меня вопрос, могу ли я положиться на это поведение? Гарантируется ли это в каких-либо стандартах или может изменяться в зависимости от браузера или фазы луны? Если порядок событий не может быть гарантирован, какие стратегии вы бы порекомендовали для этого?

Источник

1 ответ

Я могу сказать, что это, вероятно, зависит от системы. Я использую OSX Lion, и в Chrome и Safari "красное" событие регистрируется перед "синим".

Если вы хотите разобраться с этим, чтобы быть более уверенным в сроках, сделайте что-нибудь в таком виде:

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

Вы можете подумать, что сможете установить функцию тайм-аута на myRedFoo.startAnim но это препятствует тому, чтобы сообщения были зарегистрированы.

Я все еще могу представить себе потенциальные проблемы с синхронизацией, так что это не доказательство.

Источник
Другие вопросы по тегам