중첩 루프에서 재생 기능 Javascript

Question

자바 스크립트를 사용하여지도에서 내 속성 값에 대해 다른 색상을 재생하려고 재생 기능을 구현하려고합니다. 루프가 너무 빨리 재생되고 맵의 마지막 값만 표시되기 때문에 간단한 루프를 사용하여 기본 논리를 작성하는 것이 효과적이지 않습니다.

예 :

//Hash of my Values 
var myHash = {}; 

myHash['1'] = [10,100]; 
myHash['2'] = [20,200, 30]; 
myHash['3'] = [40,300, 4, 5]; 

function startPlaying() { 
    for (item in myHash) { 
     var myValues= myHash[item]; 
     var timeOut=setTimeout(function(){ 
         animate(myValues,item); 
         },1000); 
    } 
} 

function animate(myValues,item) { 
    for(i in myValues) { 
     //calling my function for each value to play on map with different styles. 
     playMyMap(); 
    } 
} 

내가 해당 myValues ​​및 항목 (1 초 지연 항목 수에 대한) 3 회 그것은 myValues ​​반복 계속됩니다 여기 내 기능 startPlaying가 타임 아웃 기능을 발사 할 것으로 예상하고 있었다

세 항목에 대해 개별적으로.

그러나 이것은 나를 위해 작동하지 않습니다. myTimeues는 엉망이되어 setTime out 함수를 호출 할 때마다 엉망이됩니다.

아무도 나에게 아이디어를주지 못했지만 어떻게 그러한 기능을 구축 할 수 있습니까?

Answer 1

var timeOut=setTimeout(function(){ 
        animate(myValues,item); 
        },1000); 
} 

3 회 트리거되지만 모두 1 초 후에 트리거됩니다. 카운터를 유지하는 경우 1000*counter을 수행해야 매초마다 1 개의 애니메이션 기능을 수행해야합니다.

아래 예제는 인덱스 0에 첫 번째 항목을 변경하면 인덱스 0에서 1. 일반적으로 배열의 시작과 색인을 시작하기 때문에 multiplyer로 item을 사용, 단지 일초 시작하는 1000 * (item + 1)을한다.

이 시도 :

function startPlaying() { 
    for (item in myHash) { 
     var myValues= myHash[item]; 
     var timeOut=setTimeout(function(){ 
         animate(myValues,item); 
         },1000 * item); 
    } 
}