在下面的代码中，我试图循环三个函数，只有在前一个函数完成后才会触发，最后一个函数然后调用第一个函数重新启动进程。使用setInterval / setTimout不会是一个很好的答案，因为RequestAnimationFrame取代它们作为一种更干净的做事方式，但我不知道如何将RequestAnimationFrame应用于此代码。另外，为什么第三个函数不会调用第一个函数的问题也不能通过使用这两个方法来回答。
<body onload="runOne()">
function runOne(){
var x = document.getElementById("rightBox");
document.getElementById("rightBox").style.animation = "scrollTextTwo 10s";
x.addEventListener("animationend",runTwo);
};
function runTwo(){
var x = document.getElementById("rightBoxTwo");
document.getElementById("rightBoxTwo").style.animation = "scrollTextTwo 10s";
x.addEventListener("animationend",runThree);
};
function runThree(){
var x = document.getElementById("rightBoxThree");
document.getElementById("rightBoxThree").style.animation =
"scrollTextTwo 10s";
x.addEventListener("animationend",runOne);
};
上面的代码只运行一次，它将播放/动画所有三个函数，但然后在＆＃34; runThree（）＆＃34;之后停止。完成了。我想知道＆＃34; runThree（）＆＃34;可以调用＆＃34; runOne（）＆＃34;一旦运行三完成动画？