Javascript 轉換未按順序執行

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);


 }
}

外部 for 循環遍歷所有模式，兩個內部 for 循環將分別遍歷 start 和 end 模式。 出於某種原因，我的程序只顯示最后一個模式的動畫。 我懷疑這是因為代碼執行得非常快 - 但是我不確定如何解決這個問題。

有誰知道一個好的解決方法或我可以做些什么來糾正這個問題？ 任何反饋或幫助表示贊賞。

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);  
}