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 循环将分别遍历开始和结束模式。出于某种原因，我的程序只显示最后一个模式的动画。我怀疑这是因为代码执行得非常快 - 但我不确定如何解决这个问题。

有没有人知道一个好的解决方法或者我可以做些什么来纠正这个问题？感谢您提供任何反馈或帮助。

Answer 1

好吧，虽然我没有完全理解你代码的所有部分，但我已经把它搞定了。它目前还不能正常工作，但您可能会明白我正在尝试做的事情:WAITING 250 毫秒，然后再触发下一个动画，一旦用完 sibling ，就跳转到另一个动画。我不能再花时间在这上面了，但我希望这能让你到达你想去的地方:

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