Javascript 不规则间隔的嵌套settimeout（更复杂的方式）

我得到了这个递归函数，里面有嵌套的settimeout函数。间隔时间应与实际情况相同。它们不是线性的（希望这是我需要的词，英语不是我的母语）。我甚至想在这里添加更多的settimeout函数。我看到的解决这类问题的链接是针对线性级数的，比如时钟倒计时等等。但我有一些不规则的间隔。那么有没有更好更复杂的方法来做到这一点。。。这是我的密码：

  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)

  }

我能说的就是这个代码看起来很奇怪。一定有更好的办法让这个。。。 我访问的链接解决的问题更像这样：

---

我不知道我该如何在我的案例中使用它。一些帮助或建议？

因为您的

动画

调用总是指向同一个元素，而且设置的

背景色

是可预测的（从透明到黑色到透明，等等），所以所有这些功能都可以抽象为一个函数。为了方便地链接它，您可以让该函数返回一个

Promise

，该函数在所需的时间后解析，允许您使用

。然后
s或
等待
，而无需回调嵌套。此外，由于您经常在一行中执行许多动画（延迟后），因此可以在每个动画之间传递一个ms数的数组以等待，并使用循环来设置动画，然后
wait
a
Promise
，该数组在许多ms后解析

另一种可以减少缩进的方法是，当您在长代码块和短代码块之间交替使用时，尽早返回。也就是说，与您的
if（myRandomNumberBetween（1100）>10）{
测试一样，而不是

if (test1) {
  // many lines 1
  if (test2) {
    // many lines 2

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

它非常不可读-每个
都与哪个测试连接？它不是很明显，这是一个问题。相反，您可以执行以下操作：

if (!test) {
  // do something else 1
  return;
}
// many lines 1
if (!test2) {
  // do something else 2
  return;
}
// many lines 2

将所有这些转换为对原始代码的修复：

// 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);
}

//动画部分：
让isBlack=true；
函数animate（）{
$（“.playerFocoattwo”）。制作动画({
背景颜色：黑色？“透明”：“黑色”
}, 20);
isBlack=！isBlack；
}
//延迟函数，
//与“设置超时”相比，当您可以“等待”一个“承诺”时，允许编写更平坦的代码：
const delay=ms=>newpromise（res=>setTimeout（res，ms））；
异步函数animateAndWait（msArr）{
for（设i=0；i如果（myRandomNumberBetween（1100））设置超时（betterBlitzColor，myRandomNumberBetween（5000，5000））的意义是什么？
？如果函数名听起来像它，为什么不
设置超时（betterBlitzColor，5000）
？设置这些数字是为了更好地查看所有函数是否为gppd。对于正常使用，应该是这样的。setTimeout（betterBlitzColor，myRandomNumberBetween（9000，18000））哇，老兄，非常感谢。这就是所有与我的代码相同的代码？或者我需要添加一些东西？因为它看起来比我的小。是的，除了延迟（myRandomNumberBetween（9000，18000））
部分（如果你愿意，可以使用
myRandomNumberBetween（5000，5000）
）我不想显得粗鲁，但这段代码不会在函数末尾将颜色改回黑色。它保持透明。我无法理解，因为这对我来说是全新的。也许你在第一次设置超时之前忘记了代码行：$（“.playerinfocoattow2”）.animate（{backgroundColor:“transparent”}，20）；请帮助！这些都包含在初始的
animateAndWait
调用中。如果希望第一个
300
始终对应于
transparent
的动画，可以在
animateAndWait
的开头将
isBlack
设置为
true
，以便初始
m>中的奇数项sArr
不会引起问题。哦，我想我看到问题了，您的初始块有5个
setTimeout
s，但有6个
调用。动画
调用。在初始
animateAndWait
调用中的数组开头添加一个
0