여러 루프 후 JavaScript 애니메이션 지연

Question

나는 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; 
    } 

내가 루프를 사용할 수 없습니다

.

누군가가 몇 루프 후에 애니메이션이 멈추는 것을 어떻게 막을 수 있는지 말해 주시면 좋을 것 같습니다. 고맙습니다!

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에 전용 지연을 추가 할 수 있습니다.