Question

jQuery 无限动画导致调用堆栈错误

2019-06-21

73

javascript jquery jquery-color

我正在使用最新版本的 jQuery 和 jQuery color。我试图使用动画来无限地改变容器的颜色。但是当我运行以下代码时，我收到错误：“Uncaught RangeError：超出最大调用堆栈大小”。动画循环工作正常，但它阻止了其余 jQuery 代码的执行。我不知道堆栈溢出来自哪里..！

  let $container = $("#container");
  let colours = ["56, 68, 97", "97, 56, 80", "42, 74, 53", "104, 66, 44"];

  (function colourAnimation() {
    colours.forEach((colour) => {
      $container.animate({"color": "rgb(" + colour + ")",
                          "background-color": "rgba(" + colour + ", 0.2)",
                          "border-color": "rgba(" + colour + ", 0.7)",
                        }, 2500);
    });
    $container.animate({}, 0, "", colourAnimation);
  })()

Answer 1

您的 function colourAnimation() 以对方法 animate 的调用结束，该方法的第四个参数已传递 colourAnimation 。
文档 @ https://api.jquery.com/animate/ 表明第四个参数是

A function to call once the animation is complete, called once per matched element.

代码当然会无限递归？

Answer 2

如果您希望代码无限运行，只需使用 setInterval(function, time) ，其中时间以毫秒为单位。更好的解释可以在此处找到。