How to reduce nested callbacks in javascript/jquery

By using async await + promises

if you call .promise() after a animation you will get a promise back. thanks to it you can be able to wait for it to finish

async function animate() {
    await $("#layer-1").fadeIn(1000).promise()
    await $("#layer-2").fadeIn(1000).promise()
    await $("#layer-3").fadeIn(1000).promise()
    await $("#layer-4").fadeIn(1000).promise()
    await $("#layer-5").fadeIn(1000).promise()
    await $("#layer-6").fadeIn(1000).promise()
    await $("#layer-7").fadeIn(1000).promise()
    await $("#layer-8").fadeIn(1000).promise()
    // pause for 2 seconds, then reset and hide all layers:
    await $("#home-map .layer").delay(2000).fadeOut().promise();
}

const loop = () => animate().then(loop)
loop()

Looking at this makes a for loop fit in very well.

async function animate() {
    for (let i = 1; i < 9; i++)
        await $(`#layer-${i}`).fadeIn(1000).promise()

    // pause for 2 seconds, then reset and hide all layers:
    await $("#home-map .layer").delay(2000).fadeOut();
}

This is only possible in most recent browser

Guessing it can be made more dynamic if you did

for (let layer of $("#home-map .layer"))
    await $(layer).fadeIn(1000).promise()

Here is a es5 alternativ to same problem but using reduce to chain promises

function animate() {
  $(".layer").toArray().reduce(function(prev, elm){
    return prev.then(function(){
      return $(elm).fadeIn(1000).promise();
    })
  }, Promise.resolve()).then(function(){
    // do the master
    $(".masterLayer").delay(2000).fadeOut();
  })
}

animate()

.layer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterLayer">
  <div class="layer">layer 1</div>
  <div class="layer">layer 2</div>
  <div class="layer">layer 3</div>
  <div class="layer">layer 4</div>
  <div class="layer">layer 5</div>
  <div class="layer">layer 6</div>
</div>

use a class instead of ids, then loop through them and add delay based on their index

var layers = $(".layer").length;

function foreverLoop() {

  $(".masterLayer").show();
  $(".layer").hide();

  $(".layer").each(function(index) {
    $(this).delay(1000*index).fadeIn(1000);
  });
  
  $(".masterLayer").delay(1000*layers + 2000).fadeOut(1000);
  
  setTimeout("foreverLoop()", 1000*layers + 3000 + 500);
}

foreverLoop();

.layer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterLayer">
  <div class="layer">layer 1</div>
  <div class="layer">layer 2</div>
  <div class="layer">layer 3</div>
  <div class="layer">layer 4</div>
  <div class="layer">layer 5</div>
  <div class="layer">layer 6</div>
</div>

What you have is a recurring series of asynchronous function calls. You could use promises to flatten your arrow code, but we're not talking about code that we expect to throw errors, so there's no need of asynchronous try..catch, which is what promises are.

Asynchronous functions that happen in sequence are queues. jQuery has a nice queue method, which is what I recommend here.

Now, because you're executing this queue on a variety of different elements, you'll need to pick a common element to store the core queue on. In this case, I'll use body but you could use pretty much any element (I recommend the closest common parent to all of the elements that you're animating because it will allow you to use the structure on the page in multiple places without the queues interfering with one-another, but that's more of an advanced step).

The fx queue is the default queue, which is where animations actually occur. We're going to want to manage this queue separately from the fx queue so that other animations can happen alongside 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 awfully repetitive. I'll leave it as an exercise to the reader to change it to a simple for loop or whatever you'd like it to be. It's just an example of the overall simplification.

The code in this example is longer than the original, but don't let that fool you. Because it's a queue, it's easier to reason about and edit later. Steps can be inserted and removed without needing to change wait times or attempt to rebalance nested parenthesis/curly braces.