几次循环后JavaScript动画滞后

Question

我使用velocity.js为项目设置了这些虚线（SVG）的动画。

然而，经过几次循环后，动画开始滞后很多。

我已在下面的codepen中粘贴了我动画的链接。

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

如果有人能告诉我如何在几个循环之后阻止动画滞后，那将是很棒的。谢谢！

Answer 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添加专用延迟。