자바 스크립트 전환이 순서대로 실행되지 않습니다

Question

12 개의 원호 세그먼트로 구성된 원이 있습니다. 사용자가 시작 패턴에서 끝 패턴으로의 전환을 볼 수 있도록하고 싶습니다. (많은 시작과 끝 패턴이있을 것이다). 루프

http://codepen.io/blazerix/pen/jrwNAG

function playAnimations(){ 
var totalLength = document.getElementsByClassName("container")[0].children.length 

for(var i = 0; i < totalLength; i++){ 
    var current_pattern = document.getElementsByClassName("container")[0].children[i] 
     console.log(current_pattern) 
     for(var j = 0; j < 12; j++){ 
      $('#LED' + (j+1)).css('transition-duration', '0s'); 
      $('#LED' + (j+1)).css({fill: current_pattern.children[1].children[j].style.backgroundColor}); 

     } 

     setTimeout(function() { 
     for(var k = 0; k < 12; k++){ 
      $('#LED' + (k+1)).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms"); 
      $('#LED' + (k+1)).css({fill: current_pattern.children[2].children[k].style.backgroundColor}); 

     } 
     }, 150); 


} 
} 

외부는 모든 패턴을 통과, 각각 시작과 끝 패턴을 거치게됩니다 루프에 대한 내부 두 :

여기에 지금까지 내 코드입니다. 어떤 이유로 든 내 프로그램은 마지막 패턴의 애니메이션 만 표시합니다. 나는 코드가 정말로 빨리 실행되고 있기 때문에 이것이 의심 스럽다. 그러나 이것을 고칠 방법이 확실하지 않다.

누구든지 좋은 해결책이나이 문제를 해결하기 위해 내가 할 수있는 일을 알고 있습니까? 모든 의견이나 도움을 주시면 감사하겠습니다.

Answer 1

코드의 모든 부분을 완전히 이해하지 못했지만, 이것을 채찍질했습니다. 아직 작동하지 않지만, 내가하려는 일에 대한 아이디어를 얻을 수 있습니다. 다음 애니메이션을 실행하기 전에 250 밀리 초를 기다렸다가, 형제가 없어지면 다른 애니메이션으로 바운스합니다. 더 이상이 시간을 보낼 수는 없지만 다음과 같이하면 좋겠다.

function playAnimations() { 
    var $patternHolder = $(".container"); 
    playAnimation($('#LED1'), 0, $patternHolder, 1, 1); 
} 

function playAnimation($target, index, $patternHolder, childPatternIndex, animationNumber) { 

    //just set both fill color and transition in the object you pass in: 
    //.eq() chooses a child, returns jQuery object of that child by index 
    //Use jQuery to get background-color style 
    $target.css({ fill: $patternHolder.children(childPatternIndex).children().eq(index).css("background-color"), transition: "0s" }); 

    setTimeout(function() { 
     if ($target.parent().next().length > 0) { 
      playAnimation($target.parent().next(), index++); 
     } else if (animationNumber == 1) { 
      playAnimation($("#LED1"), 0, patternHolder, 3, 2); 
     } 
    }, 250); 
}