div 클래스와 수면 기능 업데이트가있는 그래픽 애니메이션이 자바 스크립트로 동기화되지 않았습니다.

Question

다음 div 클래스를 변경하기 전에 수십 밀리 초를 기다리는 changing a div class으로 간단한 애니메이션을 만들려고합니다.

내 테스트 브라우저 (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은 특정 기간 후에 기능을 실행합니다.

당신은 또한 비동기 작업하지만 루프의 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

에 대한 실행을 멈추지 않을 것입니다 setTimeout 때문에 closure 살펴보고 필요