Question

我构建了一个简单的jQuery动画，它使用递归来重复一个无休止地一遍又一遍地运行动画的函数。它的工作原理看起来很酷，但在控制台中它会抛出错误：“未捕获RangeError：超出最大调用堆栈大小”...是否有另一种方法可以在不使用递归的情况下完成无限动画循环或另一种方法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

正如我在评论中所说的那样......代码中的问题是方法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

使用递归的jQuery Color Animation导致未捕获的RangeError：超出了最大调用堆栈大小

1 个答案: