我有两个动画都可以工作，但我想拥有它，所以第二个动画只有在第一个动画完成后才开始，我尝试了使用 Javascript 回调，但似乎无法让它工作。我相信有人可以告诉我如何做到这一点。一定还有其他方法可以做到这一点吗？我真的很想知道它们实际上是什么。令人惊讶的是，有多少种不同的做事方式，不是吗。
document.addEventListener("DOMContentLoaded", first, false);
var obj, height, goUp;
function first() {
obj = document.getElementById("thetext");
obj.style.position = "absolute";
obj.style.bottom = "10px";
height = document.body.clientHeight;
goUp = true
second();
}
function second() {
var pos = parseInt(obj.style.bottom, 10);
(goUp) ? pos++ : pos--;
obj.style.bottom = pos + "px";
if (pos < 0) {
goUp = true;
}
if (pos > height) {
goUp = false;
}
if (pos < 0) {
return;
}
setTimeout(second, 10);
}
var objz, width, goRight;
function animatefirst() {
objz = document.getElementById("tues");
objz.style.position = "absolute";
objz.style.left = "10px";
objz.style.bottom = "10px";
width = document.body.clientWidth;
goRight = true;
animatesecond();
}
function animatesecond() {
var position = parseInt(objz.style.left, 10);
(goRight) ? position++ : position--;
objz.style.left = position + "px";
if (position > width) {
goRight = false;
}
if (position < 0) {
goRight = true;
}
if (position < 0) {
return;
}
setTimeout(animatesecond, 10);
}<body>
<p id="thetext">ANIMATION </p>
<p id="tues"> Tuesday</p>
</body>我以一种简单的方式解决了这个问题，我只是在返回之前将调用下一个函数; 关闭当前函数。因此，在代码中第一个函数完成的部分之前，不会插入对下一个函数的调用，以避免函数重叠。我很惊讶没有人能帮忙，但它一定是一个非常繁忙的网站:)
if (pos < 0) {
nextfunction();
return;
}