延迟在for循环中有if/else语句的迭代

Question

我想让西蒙说游戏。我有一个函数遍历数组数组。每个数字都与一个动作相关联（所以适当的按钮动画）。当序列只有1个值时，这个工作正常，但是他们都只是一次玩。我已经找到了在迭代之间加入延迟的方法，但是对于包含if/else语句的循环没有任何发现。

我想一个解决方案，我发现here：

function show_sequence() { 
    var k = right_seq.length; 

    //assign each button a number 
    //when the loop goes over it that button's animation plays 
    (function animation(i) { 
      setTimeout(function() { 
      if (i == 1) { 
       setTimeout(function() { 
        TweenMax.from("#pink", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        one.play(); 
       }, 1000); 
      } else if (i == 2) { 
       setTimeout(function() { 
        TweenMax.from("#blue", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        two.play(); 
       }, 1000); 
      } else if (i == 3) { 
       setTimeout(function() { 
        TweenMax.from("#yellow", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        three.play(); 
       }, 1000); 
      } else { 
       setTimeout(function() { 
        TweenMax.from("#green", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        four.play(); 
       }, 1000); 
      }; //end for loop 
      if (--i) { 
       animation(i); 
      } 
     }, 200); 
})(k); 
} 

和它的作品，因为它增加了动画和声音之间的延迟，但它并没有以正确的顺序播放。例如，如果数组为[3,4,1,2]，则不会将动画放置在这些按钮上，但是按[4,3,2,1]顺序排列，并且它不能运行超过4轮。

这是fiddle但游戏没有完成，所以我不知道它是否会有所帮助。按下小绿圈开始/继续添加回合。

Answer 1

这是一个快速修复。你可以做很多事情来改善它，但是这会让你超越当前的障碍。

问题是你根本没有使用你的序列。你传递给show_sequence的数字只是数组的长度 - 你正在递减（这是4,3,2,1来自哪里）。你从来没有真正得到键索引你的顺序排列的

function show_sequence() { 
    var k = right_seq.length; 

    //assign each button a number 
    //when the loop goes over it that button's animation plays 
    (function animation(i) { 
    if (i >= right_seq.length) { 
     return; 
    } 
    setTimeout(function() { 
     if (right_seq[i] == 1) { 
     setTimeout(function() { 
      TweenMax.from("#pink", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      one.play(); 
     }, 1000); 
     } else if (right_seq[i] == 2) { 
     setTimeout(function() { 
      TweenMax.from("#blue", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      two.play(); 
     }, 1000); 
     } else if (right_seq[i] == 3) { 
     setTimeout(function() { 
      TweenMax.from("#yellow", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      three.play(); 
     }, 1000); 
     } else { 
     setTimeout(function() { 
      TweenMax.from("#green", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      four.play(); 
     }, 1000); 
     }; //end for loop 
     animation(++i); 
    }, 200); 
    })(0); 
} 

Answer 2

而不是使用所有这些计时器，利用该方法staggerFrom，这将做延迟你的。若要从right_seq阵列系列producesd，该数组转换为元素名称的列表：

function show_sequence() { 
    var k = right_seq.length; 
    var circles = right_seq.map(function (num) { 
     return ['#pink','#blue','#yellow','#green'][num-1]; 
    }); 
    // this will apply the animation in sequence 
    TweenMax.staggerFrom(circles, 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}, 0.6); 
} 

既然你都这样了，你可能需要检查动画本身，因为这种方法将设置所有受影响的元素立即到他们的初始样式，但在“交错”延迟执行动画。

如果不奏效，使用onComplete财产实现你的循环：

function show_sequence() { 
    var circles = right_seq.map(function (num) { 
     return ['#pink','#blue','#yellow','#green'][num-1]; 
    }); 
    (function loop(i) { 
     if (i>=circles.length) return; 
     TweenMax.from(circles[i], 0.6, { 
      opacity:0.3, scale:0.8, ease:Elastic.easeOut, 
      onComplete: loop.bind(this,i+1) 
     }); 
    })(0); 
}