jQuery Color Animation Using Recursion 导致 Uncaught RangeError: Maximum call stack size exceeded

Question

我构建了一个简单的 jQuery 动画，它使用递归来重复一个函数，该函数会无休止地一遍又一遍地运行动画。它可以工作并且看起来很酷，但是在控制台中它会抛出错误：“Uncaught RangeError: Maximum call stack size exceeded”...是否有另一种方法可以在不使用递归的情况下完成无限动画循环或另一种方法 CSS3 或基于 jQuery 的解决方案可能不会使浏览器抛出错误？

这是 jsfiddle 的工作代码：http://jsfiddle.net/flatiron_school/0busdnv7/5/

如果你讨厌 jsfiddle，下面是包含的代码：

<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
  var $a1 = $('a').eq(0),
      $a2 = $('a').eq(1),
      $a3 = $('a').eq(2),
      $a4 = $('a').eq(3),
      $a5 = $('a').eq(4),
      links = [$a1,$a2,$a3,$a4,$a5];
      delays = [100,200,300,400,500];

  function colorChange() {
    for (i=0; i < links.length; i++) {    
      var $el = links[i],
          amount = delays[i];
      $el.delay(amount).animate({'background-color': 'rgb(255,80,72)'},400);
      $el.delay(amount).animate({'background-color': 'rgb(64,80,44)'},400);
      $el.delay(amount).animate({'background-color': 'rgb(176,24,98)'},400);
      $el.delay(amount).animate({'background-color': 'rgb(42,157,200)'},400);
    }
    colorChange();
  }
  colorChange();
</script>

任何帮助表示赞赏。干杯！

Answer 1

正如我在 cmets 中所说...您的代码的问题是您的方法 colorChange 中的无限递归，这将打破浏览器的堆栈限制...

我建议的转储解决方案是在递归调用中使用超时，这将中断递归并使用新堆栈调用方法.. 像

setTimeOut(colorChange, 1);

但作为一个真正的解决方案尝试

var colors = ['rgb(255,80,72)', 'rgb(64,80,44)', 'rgb(176,24,98)', 'rgb(42,157,200)'];

$('a').each(function () {
    changeColor($(this));
});

function changeColor($el) {
    $el.animate({
        'background-color': colors[Math.floor(Math.random() * colors.length)]
    }, 400, function () {
        setTimeout(function () {
            changeColor($el);
        }, 100 + Math.floor(Math.random() * 400));
    });
}

演示：Fiddle