Simon Game, настройка и анимация Javascript

Question

Может ли кто-нибудь помочь мне смоделировать анимацию четырех тегов div? Просто для цикла следует подождать, пока непрозрачность тегов div не изменится за 1 секунду.

function animateDiv(ar) { // ar contains div tag indexes. ex:[0,3,2,3,1,0,1,2,3] 
    for (var i = 0; i < ar.length; i++) { 
     var ind = ""; 

     if (ar[i] == 0) ind = ".red"; 
     else if (ar[i] == 1) ind = ".blue"; 
     else if (ar[i] == 2) ind = ".yellow"; 
     else if (ar[i] = 3) ind = ".green"; 
     var ok = false; 
     setTimeout(function() { 
      $(ind).css('opacity', 1); 
      console.log("waiting " + " index: " + i); 
      ok = true; 
     }, 1000); 

     if (ok == true) { 
      $(ind).css('opacity', 0.7); 
      console.log("Done!"); 
     } 

    } 
} 

https://jsfiddle.net/z8y2v5u1/

Answer 1

для цикла не может ждать тайм-аут, чтобы закончить, потому что функция Вы обеспечиваете setTimeout() выполняется асинхронно после текущей функции (и все, что называется текущей функции) заканчивается. Таким образом, весь цикл будет выполняться до истечения таймаута.

Для запуска следующей итерации вам необходимо использовать «псевдо-петлю», которая полагается на setTimeout(). Что-то вроде следующего будет работать:

function animateDivs(ar, cb) { 
 
    var $divs = $(".red,.green,.blue,.yellow"), 
 
    i = 0; 
 

 
    (function next() { 
 
    if (i === ar.length) { 
 
     if (cb) cb(); 
 
    } else { 
 
     var $div = $divs.eq(ar[i]).css('opacity', 1); 
 
     setTimeout(function() { 
 
     $div.css('opacity', 0.7); 
 
     i++; 
 
     next(); 
 
     }, 1000); 
 
    } 
 
    })(); 
 
} 
 
animateDivs([0,3,2,3,1,0,1,2,3], function() { console.log("Finished")});

div { width: 40px; height: 40px; display: inline-block; opacity: 0.7;} 
 
.red { background-color: red;} 
 
.green { background-color: green;} 
 
.blue { background-color: blue;} 
 
.yellow { background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="red"></div><div class="green"></div> 
 
<br/> 
 
<div class="blue"></div><div class="yellow"></div>

next() функция изменяет соответствующие дела до непрозрачности 1, а затем использует setTimeout() ждать второй перед изменением непрозрачности назад, а затем вызвать next() снова для следующего индекса в массиве.

Я понял, что вам может понравиться какой-то способ узнать, когда анимация закончилась, поэтому я добавил аргумент обратного вызова (cb) в animateDivs(), который будет вызываться после обработки всего массива - в моем примере все, что он делает записывает что-то на консоль, но вы можете использовать его, чтобы сделать что-то более интересное.