暂停执行动画

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

暂停执行动画

Pausing execution for animation

javascript

jquery

settimeout