javascript - 几次循环后JavaScript动画滞后

我正在为使用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，因为我想编排/编排动画。

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

最佳答案

查看您的代码，建议将您的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中添加专用延迟。

关于javascript - 几次循环后JavaScript动画滞后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38500514/