在嵌套循环Javascript中播放功能

Play functionality in nested loops Javascript

本文关键字:播放 功能 Javascript 嵌套循环      更新时间:2023-09-26

我正在尝试使用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将触发超时函数三次(1秒延迟的项目数量)与相应的myValues和item,它将继续迭代myValues分别为三个项目。

但是这对我不起作用,因为myValues在每次调用setTime out函数时都会弄乱。

谁能给我一个想法在这里,我怎么能建立这样的功能?

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

将触发3次,但都在1秒后。如果你保持一个计数器,你必须做1000*counter每秒有一个动画函数。

下面的示例使用item作为乘数,因为您的索引以1开始。通常数组从索引0开始。如果您将第一项更改为索引0,只需执行1000 * (item + 1)以从1秒开始。

试试这个:

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