Play functionality in nested loops Javascript
<p>I am trying to build play functionality using JavaScript to play different colors for my attribute values on map. The basic logic, I am building using simple for loop does not work for me as the loop is played so fast and I only get display last value on Map. </p>

<p>Example:</p>

<pre><code>//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();
    }
}
</code></pre>

<p>I was expecting here that my function startPlaying will fire timeout function three times(for number of items with 1 sec delay) with corresponding myValues and item and It will keep on iterating over myValues individually for three items. </p>

<p>But this doesn't work for me beacuse the myValues gets messed up while each call of setTime out function. </p>

<p>Could anyone please give me an idea here, how can I build such functionality?</p>
