暂停动画执行

Question

我正在制作一个简单的Simon Says游戏进行练习，但是遇到了一些麻烦。

当AI播放出用户要模仿的模式时，我希望它一次按下一个按钮。 每按一次按钮之间需要稍作停顿，以使声音和动画完成。

我将模式存储在数组中，并使用for循环遍历它，如下所示：

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.

如您所见，我正在使用setTimeout因为这是我在整个研究过程中都能找到的。 但是它不起作用，所以也许我的整个方法是错误的。

我将对如何解决此问题提出任何建议。

Answer 1

无论延迟如何，您的代码都将无法工作，因为函数中的名称i与封闭环境中的变量i绑定在一起。 这一点非常重要：在定义函数时，名称i不会捕获i的值。 它引用在函数定义之前声明的变量i 。 到第一个超时触发时， i的值将为4。因此，所有四个超时函数将使用错误的值。

有几种方法可以解决您的问题。 这是一个简单的例子：

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

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

flash();

如果要在第一声蜂鸣声之前延迟250毫秒，请使用以下命令替换上面的最后一行：

window.setTimeout(flash, 250);

另一个观察结果：您在这里实际上并不需要jQuery。 您可以这样写：

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