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和{{1 }}在那么多毫秒后解决。

当长代码块和短代码块之间有交替时，其他可以减少缩进的事情是早退。也就是说，就像您的Promise测试一样，而不是

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 }都连接到哪个测试？现在还不是很明显，这是一个问题。相反，您可以执行以下操作：

do something else

将所有这些翻译成您的原始代码的修正：

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

具有不规则间隔的嵌套settimeout（更复杂的方法）

1 个答案: