javascript - 具有不规则间隔的嵌套 settimeout(更复杂的方式)

Question

我得到了这个带有嵌套 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)

  }

我只能说这段代码看起来真的很奇怪。必须有一些更好的方法，这...我访问过的链接更像这样解决问题:

Nested setTimeout alternative?

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

Answer 1

因为您的 animate 调用总是针对相同的元素，并且设置 backgroundColor 是可预测的(透明到黑色再到透明，等等)，所有这些功能可以抽象成一个函数。为了轻松链接它，您可以让该函数返回一个 Promise，它会在所需时间后解析，从而允许您使用 .then 或 await 没有回调嵌套。此外，因为你经常连续做很多动画(在延迟之后)，你可以传递一个数组，其中包含每个动画之间要等待的毫秒数，并使用循环来制作动画，然后 await a Promise 在那么多毫秒后解析。

可以减少缩进 hell 的其他方法是当您在长代码块和短代码块之间交替时提前返回。也就是说，与您的 if (myRandomNumberBetween(1, 100) > 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);
}