javascript - 尝试递归动画与JavaScript回调(trying recursive animation with callback in javascript)

Question

so for past +12 hrs been trying to figure out how to recursively call an animation function.(因此在过去的12个小时内，我们一直在试图弄清楚如何递归调用动画函数。)

here's what i've been trying to do, i want the "rain-effect" of colors dropping in, highlighting each cell.(这就是我一直在尝试的工作，我希望颜色的“雨水效果”滴入其中，突出显示每个单元格。)

While all tds(columns) must highlight randomly starting from 0th row, and do it such that each column doesn't get highlight color right after.(虽然所有tds（columns）必须从第0行开始随机突出显示，并且这样做以确保每一列都不会在其后立即获得突出显示颜色。)

here's a codepen link https://codepen.io/fahadpnw/pen/MWWRdNG (the animation is "pre-start" ie, without pressing the start button.(这是一个codepen链接https://codepen.io/fahadpnw/pen/MWWRdNG （动画是“预开始”的，即无需按下开始按钮。)

however, in browser it crashes after a while, has a memory leak + i'm really trying to figure out how to call these such that instead of a single color flowing / raining down, i could have multiple... and each at a different pace/speed..(但是，在浏览器中，它会在一段时间后崩溃，并发生内存泄漏+我真的是想弄清楚如何调用这些方法，以使我可以有多个...而不是单个颜色飘落/下雨。不同的速度/速度)

function animateTable(firstSpot) {
var randomColor = theColors[Math.floor(Math.random() * theColors.length)];
var firstAnimation;
var secondAnimation;
firstSpot.each(function (index, val) {
var col = $(this).attr("data-column")
var row = $(this).attr("data-row")
console.log("data-column", col, "data-row", row);


// $(this).delay(Math.random() * (2000)) + 200;
$(this).delay(index * 700).css('background-color', 'white')
firstAnimation = $(this).animate({ backgroundColor: randomColor }).delay(300)
secondAnimation = firstAnimation.animate({ backgroundColor: "white" }, function () {
  var some = $("#table").find(` [data-row='` + row + `'] + [data-column='` + col + `'] `)
  var bg = some[0].style.backgroundColor
  console.log(bg)

  var secondSpot
  console.log("res", !arr.includes(getFirstSpot));
  console.log("arr is ", arr)

  if (index == 4) {
    do {
      secondSpot = getFirstSpot()
      console.log("4th index - do spot")

      $(this).after(animateTable(secondSpot))
    } while (getFirstSpot == firstSpot[0]) {

      if (arr.length > 9) {
        arr.length = 0
      }
    }

  }

  //$(this).after(animateTable(table))
});

});

  ask by Fahad Bilal translate from so

Answer 1

so i altered the above code by altering it to this and minimizing the random factor multiplying to index to some extent, not fully though.(所以我通过将其更改为上面的代码并在一定程度上最大限度地减少了随机因子乘以索引的方式来更改了代码，尽管没有完全实现。)

still not sure how i'd approach this but the following did help.(仍然不确定我将如何处理此问题，但是以下内容确实有所帮助。)

function animateTable(spot) {
  var rand = getRandomFloat(0.4, 0.9)
  var randomColor = theColors[Math.floor(Math.random() * theColors.length)];
  var counter = 0

  spot.each(function (index, val) {
    if (!gRunning) {
      $(this).animate({ backgroundColor: "white" }, {
        duration: (index + 1) * rand * 3000,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        }
      }, $(this).attr("data-animating", true)).animate({
        backgroundColor: randomColor
      }, {
        duration: (index + 1) * 200,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        }
      }).animate({
        backgroundColor: "white"
      }, {
        duration: (index + 1) * 200,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        },
        complete: function () {

          counter = counter + 1;
          if (counter == 5) {
            counter = 0;
            initAnim()
            $(this).attr("data-animating", false)
          }
        }
      })
    } else {
      return false
    }
  })
}