Delaying iterations in a for loop which has if/else statements

Question

I am trying to make a Simon Says game. I have a function which iterates through an array of number. Each number is associated with an action (so the appropriate button animation). This works fine when the sequence is only 1 value long, but then they all just play at once. I have looked up ways to put a delay in between the iterations but have found nothing for for loops which contain if/else statements.

I tried a solution I found 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);
}

And it works in that it adds a delay between the animations and sound, but it doesn't play them in the correct order. For example if the array is [3, 4, 1, 2] it doesn't place the animation on those buttons, but in [4, 3, 2, 1] order, and it doesn't work for more than 4 rounds.

Here is the fiddle but the game isn't finished so I don't know if it'll help. Press the small green circle to start/keep adding rounds.

Answer 1

This is a quick fix. There's a number of things you could do that would improve it, but this should get you past your current hurdle.

The issue was that you weren't using your sequence at all. The number you were passing into the show_sequence was just the length of the array - which you were decrementing (this is where the 4, 3, 2, 1 came from). You never actually got the button index out of your sequence array

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