You have a repeating series of asynchronous function calls. You can use promises to smooth your arrow code , but we are not talking about code that we expect to try..catch errors, so there is no need for an asynchronous try..catch , which is what promises is.
Asynchronous functions that occur in a sequence are queues. jQuery has a nice queue method , which I recommend here.
Now, since you are executing this queue on different elements, you need to select a common element to store the kernel queue. In this case, I will use the body , but you can use almost any element (I recommend the closest common parent to all the elements that you are animating, because this will allow you to use the structure on the page in several places without queuing, interfering with each other, but this is a more advanced step).
The fx queue is the default queue in which the animation takes place. We will want to manage this queue separately from the fx queue so that other animations can occur next to this queue.
function myAnimation() { $('body') // queue up the next step of the animation .queue('my-animation', (next) => { // `next` is a function that tells the queue to continue // on to the next step. We pass next to the complete // callback of the animation so that they can continue // fluidly. $('#player-1').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-2').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-3').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-3').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-4').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-5').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-6').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-7').fadeIn(1000, next); }) .queue('my-animation', (next) => { $('#player-8').fadeIn(1000, next); }) // here we want to wait for a bit before continuing with // the rest of the queue .delay(2000, 'my-animation') .queue('my-animation', (next) => { $('#home-map .layer').fadeOut(next); }) // here we repeat the animation so that a `setInterval` call // is unnecessary, and so that we don't have to care how long // the animation takes in total .queue('my-animation', (next) => { // queue up the next iteration of the animation myAnimation(); // continue with the queued animation next(); }); } myAnimation(); // queue up the animation $('body').dequeue('my-animation'); // start the animation
Now this code is terribly repeated. I will leave this as an exercise for the reader to change it to a simple for loop or whatever you would like. This is just an example of general simplification.
The code in this example is longer than the original, but don't let this fool you. Since this is the turn, it’s easier to reason and edit later. Steps can be inserted and deleted without having to change the timeout or trying to rebalance the nested brackets / curly braces.