Question

我正在制作一个简单的西蒙说练习游戏，但我遇到了一些麻烦。

当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]));

暂停执行动画

1 个答案: