JavaScript 动画在多次循环后出现滞后

Question

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

但是，经过几次循环后，动画开始严重滞后。

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

http://codepen.io/aofaoin/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 中添加专用延迟。