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

【问题标题】：jQuery infinite animation causing call stack errorjQuery无限动画导致调用堆栈错误
【发布时间】：2019-06-21 16:21:28
【问题描述】：

我正在使用最新版本的 jQuery 和 jQuery 颜色。我正在尝试使用动画来无限地改变我的容器的颜色。但是当我运行以下代码时，我收到错误：“未捕获 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);
  })()

【问题讨论】：

正如 robut 所说，您在函数完成后立即调用它。因此，该函数基本上被无限调用。你的意思是把最后一行放在函数之外吗？
我需要无限调用函数以使动画无限循环。除非有其他方法可以在没有堆栈错误的情况下实现此效果。
您可以使用setInterval(colourAnimation, time);，时间应该以毫秒为单位。这里有一个解释 - w3schools.com/jsref/met_win_setinterval.asp

标签： javascript jquery jquery-color

【解决方案1】：

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

动画完成后调用的函数，每次调用一次匹配的元素。

当然代码会无限递归？

【讨论】：

是的，但不应该在动画结束时调用（在这种情况下每 4*2500 毫秒）？获取调用堆栈错误表明（对我而言）回调没有等待动画持续时间。

【解决方案2】：

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

【讨论】：

我的理解是，在这种情况下使用setInterval 是不好的做法，因为可能会引入竞争条件。
我知道我上面的代码应该能以某种方式工作，但要么我在语法方面遗漏了一些东西，要么我误解了关于回调或 IIFE 的一些基本知识。
@liphenste 很抱歉回复很晚，但 setInterval 是唯一的解决方案