Q:

nested settimeout with irregular intervals (more sophisticated way)

I got this recursive function with nested settimeout functions inside. The intervals should be the way the are. They are not linear(hope that is the word i need, english is not my native language). I even want to add some more settimeout functions here. The links i have seen solving problems like this are for linear progression, like clock countdown and such. But I have some irregular pattern of intervals. So is there some better, more sophisticated way to do  this... Here is my code:
  function betterBlitzColor() {

  $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20);
  setTimeout(function () {
    $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
    setTimeout(function () {
      $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
        setTimeout(function () {
          $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
          setTimeout(function () {
            $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
            setTimeout(function () {
              $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
              if(myRandomNumberBetween(1, 100) > 10)
              {
                setTimeout(function () {
                  $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
                  setTimeout(function () {
                    $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
                    if(myRandomNumberBetween(1, 100) > 10)
                    {
                      setTimeout(function () {
                        $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
                        setTimeout(function () {
                          $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
                            setTimeout(function () {
                              $(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
                              setTimeout(function () {
                                $(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
                                setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000));   // inside 
                              }, 150)
                            }, 100)
                        }, 100)
                    }, 400) // level 3

                    }
                    else{
                      setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000));   // inside 
                    }
                  }, 300)
              }, 650) // level 2

              }
              else{

                setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000));   // inside 
              }
            }, 50)
          }, 50)
        }, 150)
    }, 50)
  }, 300)

  }

All I can say is that this code really looks weird. There must be some better way that this... 
The links I have visited solve problems more like this:
Nested setTimeout alternative?
I dont know how would I use that here in my case. Some help or suggestions?

A:

Because your animate calls are always to the same element, and the set backgroundColor is predictable (transparent to black to transparent, and so on), all of that functionality can be abstracted into a function. To chain it easily, you could have that function return a Promise that resolves after the desired amount of time, allowing you to use .thens or await without callback nesting. In addition, because you often do many animations (after delays) in a row, you could pass an array of the number of ms to wait between each animation, and use a loop to animate and then await a Promise that resolves after that many ms.
Something else that can reduce indentation hell is to return early when you have an alternation between a long code block and a short code block. That is, as with your if (myRandomNumberBetween(1, 100) > 10) { tests, instead of
if (test1) {
  // many lines 1
  if (test2) {
    // many lines 2

    // many more lines
  } else {
    // do something else 1
} else {
  // do something else 2
}

It's pretty unreadable - which test is each do something else connected to? It's not immediately obvious, which is a problem. Rather, you can do something like:
if (!test) {
  // do something else 1
  return;
}
// many lines 1
if (!test2) {
  // do something else 2
  return;
}
// many lines 2

Translating all of this to a fix of your original code:
// Animation part:
let isBlack = true;
function animate() {
  $(".playerInfoCoatTwo").animate({
    backgroundColor: isBlack ? "transparent" : 'black'
  }, 20);
  isBlack = !isBlack;
}

// Delay function,
// allows for much flatter code when you can `await` a `Promise` compared to `setTimeout`:
const delay = ms => new Promise(res => setTimeout(res, ms));
async function animateAndWait(msArr) {
  for (let i = 0; i < msArr.length; i++) {
    animate();
    await delay(msArr[i]);
  }
}

async function betterBlitzColor() {
  await animateAndWait([0, 300, 50, 150, 50, 50]);
  if (myRandomNumberBetween(1, 100) <= 10) {
    return delay(myRandomNumberBetween(9000, 18000))
      .then(betterBlitzColor);
  }
  await animateAndWait([650, 300]);
  if (myRandomNumberBetween(1, 100) <= 10) {
    return delay(myRandomNumberBetween(9000, 18000))
      .then(betterBlitzColor);
  }
  await animateAndWait([400, 100, 100, 150]);
  delay(myRandomNumberBetween(9000, 18000))
    .then(betterBlitzColor);
}

