JavaScript 动画在几个循环后滞后答案

【问题标题】：JavaScript animation lag after several loopsJavaScript 动画在几个循环后滞后
【发布时间】：2016-11-24 19:50:29
【问题描述】：

我正在为使用velocity.js 的项目制作这些虚线(SVG) 的动画。

但是，在几个循环之后，动画开始滞后很多。

我已将我的动画链接粘贴到下面的代码笔中。

http://codepen.io/alvintan559/pen/pbLvAb?editors=0110

for (i = 1; i <= 69; i++) {
    $("#gold2 .cls-" + i)
      .velocity("fadeOut", {
        delay: g2,
        duration: 800,
      })
      .velocity("fadeIn", {
        delay: 15,
        duration: 800,
      })
    g2 += 80;
  }

我不能使用 loop:true 因为我想编排/编排动画。

如果有人能告诉我如何阻止动画在几个循环后滞后，那就太好了。谢谢！

【问题讨论】：

似乎您可能希望在外部for(a 循环的顶部而不是在其上方初始化g1,g2,b1,b2,b3,b4 变量？
@JaromandaX 嗨，我尝试将它放在外部 for 循环中。但是，它并没有解决动画在第二个外循环之后滞后的问题。还是）感谢你的建议！ :)
当您在浏览器中遇到性能问题时，请尝试将您的函数包装在 setTimeout(() => { ... }, 0) 中。对我帮助很大。

标签： javascript animation svg velocity.js

【解决方案1】：

查看您的代码，我建议将您的 velocity 操作包装在 setTimeout(function() { ... }, 0) 中。这将防止浏览器因您尝试执行的大量同步操作而冻结。

  for (i = 1; i <= 69; i++) {
    setTimeout(function() {
      $("#gold2 .cls-" + i)
        .velocity("fadeOut", {
          delay: g2,
          duration: 800,
        })
        .velocity("fadeIn", {
          delay: 15,
          duration: 800,
        });
       g2 += 80;
     }, 0);
  }

如果您需要延迟制作动画，请在 setTimeout 中添加专用延迟。

【讨论】：

嗨@Appeiron，感谢您的建议！我用我的代码试了一下。但它并没有解决滞后问题。我认为设置一个专门的延迟可能会解决它，但遗憾的是，它无法正常工作。无论如何，谢谢人:)