时间戳

首页 > 解决方案 > jQuery无限动画导致调用堆栈错误

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

问题描述

我正在使用最新版本的 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);
  })()

标签： javascriptjqueryjquery-color

解决方案

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

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

当然代码会无限递归？

推荐阅读