如何让第二个动画开始，只有在第一个动画使用Javascript回调完成之后？

我有两个动画都可以工作，但我想让它，所以第二个动画只有在第一个动画完成后才开始，我尝试了Javascript回调，但似乎无法让它工作。我相信有人能教我怎么做。一定还有其他方法可以做到这一点？我很想知道它们到底是什么。令人惊讶的是，有很多不同的方式做事情，不是吗

document.addEventListener（“DOMContentLoaded”，第一个，false）；
var obj，高度，goUp；
函数优先（）{
obj=document.getElementById（“thetext”）；
obj.style.position=“绝对”；
obj.style.bottom=“10px”；
高度=document.body.clientHeight；
goUp=true
第二个（）；
}
函数第二（）{
var pos=parseInt（obj.style.bottom，10）；
（goUp）？pos++：pos--；
obj.style.bottom=pos+“px”；
如果（位置<0）{
goUp=真；
}
如果（位置>高度）{
goUp=假；
}
如果（位置<0）{
返回；
}
设置超时（秒，10）；
}
var objz，宽度，goRight；
函数animatefirst（）{
objz=document.getElementById（“tues”）；
objz.style.position=“绝对”；
objz.style.left=“10px”；
objz.style.bottom=“10px”；
宽度=document.body.clientWidth；
戈赖特=真；
动画秒（）；
}
函数animatesecond（）{
var position=parseInt（objz.style.left，10）；
（goRight）？位置++：位置--；
objz.style.left=位置+“px”；
如果（位置>宽度）{
戈赖特=假；
}
如果（位置<0）{
戈赖特=真；
}
如果（位置<0）{
返回；
}
设置超时（动画秒，10）；
}

动画

周二

我用一种简单的方法解决了这个问题，我只是在返回之前调用了下一个函数；这将关闭当前函数。因此，在代码中第一个函数完成的部分之前，不会插入对下一个函数的调用，以避免函数重叠。我很惊讶没有人能帮上忙，但这一定是一个非常繁忙的网站：）

if（位置<0）{
nextfunction（）；
返回；
}

你应该使用css动画、类和

transitionend

事件，或者JS Web动画API和承诺链。谢拉夫，问题是，我不想使用css或JS Web动画API，我想用香草Javascript作为学习练习。Web动画API是香草JS。如果你不想使用它，你必须使用

requestAnimationFrame

而不是

setTimeout

，最好是动画

transform

而不是

left

，处理回调或了解

Promise

web动画api是vanilla JS，但它是一种内置方法，我期待着自己编程的功能，我会尝试你的其他想法谢谢。

 if (pos < 0) {
 nextfunction();
 return;
 }