在嵌套循环Javascript中播放功能

我正在尝试使用JavaScript构建播放功能，以便为地图上的属性值播放不同的颜色。基本逻辑，我正在建立使用简单的for循环不适合我，因为循环播放得太快，我只得到地图上显示的最后一个值

例如：

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

我在这里期望我的函数startPlaying将使用相应的MyValue和item启动超时函数三次（对于延迟1秒的项目数），并且它将继续为三个项目分别迭代MyValue

但这对我不起作用，因为每次调用setTime out函数时，MyValue都会出错

有人能给我一个想法吗，我如何构建这样的功能

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

将触发3次，但均在1秒后触发。如果保留一个计数器，则必须执行

1000*计数器

以每秒设置一个动画功能

下面的示例使用

项

作为多重层，因为索引以1开头。通常，数组从索引0开始。如果您将第一个项目更改为索引0，只需执行

1000*（项目+1）

以1秒开始

试试这个：

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

---

这是一个结束问题。谢谢。你说得对。但是你认为有没有什么方法可以让我把所有的物品都触发在一起，然后开始单独播放它们的价值观呢。（我的意思是：项目1、2和3被一起发送到三个单独的循环中，每个项目都有各自的循环来播放该特定项目的所有值）。我知道这不能用simple for循环完成，因为执行速度会很快，我只在玩的时候得到地图上每个项目的最后值）。如果我尝试在for循环中加入sleep，那么显然浏览器将挂起）。任何建议或想法都将不胜感激。