Javascript 使用requestAnimationFrame设置div动画

我正在尝试先水平然后垂直地设置

div

的动画。但是使用

requestAnimationFrame

的问题在于它同时执行两个动画，使得

div

沿对角线移动

这里是小提琴链接：

我做错了什么

注意：如果我按如下所示为第二次调用指定超时，它将按预期工作：

animate（'abc'，'marginLeft'，2501000）；
setTimeout（函数（）{
动画（'abc'，'marginTop'，2501000）；
}, 3000);
JavaScript中的大多数
函数都是同步的（将按顺序执行）。但是对于
异步
函数（不会等待前面的函数完成），使用
回调
来控制执行流程

要在第一个动画完成时调用send
函数
，请使用
回调


函数animate（id、styleAttr、finalValue、duration、callback）{
var ele=document.getElementById（'abc'），
startTime=+new Date，//不确定这是否可读？
delta=null，
req=null；
（函数超时（）{
elapsedTime=+新日期-开始时间；
如果（elapsedTime>=持续时间）{
取消动画帧（req）；
元素样式[styleAttr]=最终值+'px'；
if（回调类型！==“未定义”）{
回调（）；
}
返回；
}否则{
delta=最终价值/持续时间；
ele.style[styleAttr]=delta*elapsedTime+'px'；
}
req=请求动画帧（超时）；
})();
}
动画（'abc'，'marginLeft'，250，1000，function（）{
动画（'abc'，'marginTop'，2501000）；
});
#abc{
宽度：100px；
高度：100px；
背景色：红色；
}

调用
动画
函数两次也无济于事。。调用它一次，您必须有一个条件来测试
元素的位置。。坦率地说，
+新日期
在可读性方面没有帮助…@Rayon如果我为第二次调用
动画
提供一个超时时间，它确实会像预期的那样工作。我不确定你如何保持时间和距离之间的关系…@Rayon请查看有效版本的更新问题（使用
setTimeout
）。但这不是我想要的。是的，第二个函数在第一个函数执行之后立即执行。为什么第二个函数要等待第一个函数。语句是串行执行的。。。。