графическая анимация с функцией div и функцией спящего режима с javascript не выполняется синхронно

Question

Я пытаюсь создать простую анимацию по changing a div class, ожидая несколько миллисекунд, прежде чем менять следующий класс div и так далее.

Проблема заключается в том, что графика в моем тестовом браузере (Chrome) обновляется только в конце всех вызовов, а не после каждого изменения класса.

for(var i = 0; i < 9 ; i++){ 
     document.getElementById(i).setAttribute("class","blueSquare"); 
     sleep(500); 
    } 

here is the jsfiddle to test Я пробовал различные хаки, представленные в stackoverflow, но никто, казалось, не работать. Буду признателен за вашу помощь.

Answer 1

Если я правильно понимаю, вы пытаетесь покрасить div с интервалом по одному. Вы можете взглянуть на setTimeout, который, очевидно, будет служить для целей сон. setTimeout выполняет функцию через определенный период.

Вы также должны взглянуть на closure поскольку setTimeout является асинхронной операцией, но цикл не остановит выполнение для SetTimeout

var onClick = function() { 
    for(var i = 0; i <= 9 ; i++){ 
    (function(i){ // creating closure here 
     setTimeout(function(){ 
     document.getElementById(i).setAttribute("class","blueSquare"); 
     },i*500) // 1st div will be colored after 500 msec,second div 1000msec, & so on 
    }(i)) 
    } 
}; 

$('#button').click(onClick); 

JSFIDDLE