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

Question

I'm using the latest versions of jQuery and jQuery color. I am trying to use animations to change the colors of my container infinitely. But when I run the following code, I get the error: "Uncaught RangeError: Maximum call stack size exceeded". The animation loop is working correctly, but it blocks the rest of my jQuery code from executing. I don't know where the stack overflow is coming from..!

  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

Your function colourAnimation() ends with a call to a method animate , whose fourth parameter was passed colourAnimation .
The docs @ https://api.jquery.com/animate/ indicate that that 4th argument is

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

Of course the code would recurse infinitely ?

Answer 2

If you want your code to be run infinitely, just use setInterval(function, time) where time is in milliseconds. A better explanation can be found here