I simply want the second function to run after the first and so on. the first function is being called in the html page by body onload="runOne()"

Question

function runOne() {
    rightBox.style.animation = "scrollTextTwo 10s 1";
}

function runTwo() {
    rightBoxTwo.style.animation = "scrollTextTwo 10s 1";
}

function runThree() {
    rightBoxThree.style.animation = "scrollTextTwo 10s 1";
}

This question has been asked before but answered with jquery, please simply looking for an example with non jquery syntax, if it not possible to have these run in order only after the previous one completes using javascript please explain why? i understand the concept of synchronous and asynchronous code so a definition of these terms is not needed as well. just a working example, enough code has been provided.

calling the second funtction from the first like so:

function runOne() {rightBox.style.animation = "scrollTextTwo 10s 1"; runTwo();}

does not attain the goal of running one only after the first is complete

If you want it the animation timings to be 100% accurate i guess it'd be best to catch the animation end event, maybe [this answer](http://stackoverflow.com/a/2794186/4341456) or [this article](https://davidwalsh.name/css-animation-callback) can help. — Daniel, Dec 20 '15 at 19:27

epascarello · Answer 1 · 2015-12-20T19:30:41.153

0

So use setTimeout

function runOne() {
    rightBox.style.animation = "scrollTextTwo 10s 1";
    setTimeout(runTwo,10000);
}

You can also try to use the transitionend event

rightBox.addEventListener("transitionend",runTwo, false);

edited Dec 20 '15 at 19:30

answered Dec 20 '15 at 19:24

epascarello

204,599
20
195
236

is there a way to run the second function only after the first completes irregardles of how much time is involved in the first one or second one? – German Hoyos Dec 20 '15 at 19:26
or does javascript not detect the completion of functions? – German Hoyos Dec 20 '15 at 19:26
@German you extract the time from the animation property, multiply it by 1000 and pass to the setTimeout. Or just make a variable with the animation time, and pass it to the animation property and then setTimeout. – nicael Dec 20 '15 at 19:27
tried this butto didnt work - function runOne(){ rightBox.style.animation = "scrollTextTwo 10s"; } function runTwo(){ rightBoxTwo.style.animation = "scrollTextTwo 10s"; } function runThree(){ rightBoxTwo.style.animation = "scrollTextTwo 10s"; } rightBox.addEventListener("animationend",runTwo,false); – German Hoyos Dec 20 '15 at 19:36

I simply want the second function to run after the first and so on. the first function is being called in the html page by body onload="runOne()"

1 Answers1