暂停动画执行

Question

I am making a simple Simon Says game for practice, but I am having a little trouble.

When the AI plays out the pattern that the user is to imitate, I want it to press the buttons one at a time. There needs to be a little pause between each button press to allow for the sound and animation to complete.

I am storing the pattern in an array, and using a for loop to cycle through it, like this:

var computerPattern = [1, 2, 3, 4];

for (i=0; i<computerPattern.length; i++){
    setTimeout(function() {
        switch(computerPattern[i]) {
            case 1:
                    beep($("#green"));
                    break;
            case 2:
                    beep($("#red"));
                    break;
            case 3:
                    beep($("#blue"));
                    break;
            case 4:
                    beep($("#yellow"));
                    break;
            default:
                    break;
        }
    }, 250);
}
// Where 'beep' is a function that plays a sound and animation.

As you can see, I am using setTimeout because that's what I've been able to find throught my research. But it's not working, so maybe my whole approach is wrong.

I would appreciate any suggestions as to how to go about this.

Answer 1

Your code won't work regardless of the delay because the name i in your function is bound to the variable i in the enclosing environment. This is very important: the name i does not capture the value of i at the time you define the function. It refers to the variable i that was declared before the function definition. By the time the first timeout fires, the value of i will be 4. Thus, all four timeout functions will use an incorrect value.

There are several ways to solve your problem. Here is a simple one:

var colors = ['green', 'red', 'blue', 'yellow'],
    position = 0;

function flash() {
  beep($('#' + colors[position]));
  if (++position < colors.length) {
    window.setTimeout(flash, 250);
  }
}

flash();

If you want to have a delay of 250 milliseconds before the first beep, replace the last line above with this:

window.setTimeout(flash, 250);

One more observation: you don't really need jQuery here. You could write:

beep(document.getElementById(colors[position]));