Приостановка исполнения для анимации

Question

Я делаю простую игру Саймона Саиса для практики, но у меня небольшие проблемы.

Когда ИИ разыгрывает образец, который должен имитировать пользователь, я хочу, чтобы он нажимал кнопки по одному. Между каждым нажатием кнопки должна быть небольшая пауза, позволяющая завершить звук и анимацию.

Я храню шаблон в массиве, и с помощью 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]));