我是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中）启动动画以将它们移动到右侧，并在完成后打印到控制台。蓝色方块总是第一个说它完成了动画。从游戏开始，它似乎与动画的开始顺序或方块的位置无关，而与它们的创建顺序无关。 “Simultaneous”事件回调似乎首先出现在最近创建的元素上，然后是旧元素。
我的问题是我能依靠这种行为吗？是否有任何标准保证，或者它可能会根据浏览器或月亮的相位而改变？如果无法保证事件顺序，您会建议采取什么策略来应对？
我可以说这可能是系统依赖的。我正在使用OSX Lion，在Chrome和Safari中，“红色”事件在“蓝色”事件之前被记录。
如果你想破解它以便你对时间更有信心，那就做一些事情：
function startRedFoo(){ myRedFoo.startAnim() };
myBlueFoo.startAnim();
setTimeout(startRedFoo, 10); //Ten is as small as you can go.
你会认为你可以将超时功能设置为myRedFoo.startAnim，但这可以防止记录消息。
我仍然可以想象这个潜在的时间问题，所以这不是万无一失的。