for循环中的setTimeout

时间:2015-08-04 19:40:00

标签: javascript settimeout

目前我正在尝试为自己创造一个小游戏,以便在制作和使用它时获得乐趣,但我被困在一个角落。

我想制作一个记忆游戏,程序会生成一个特定的数组,其中包含应该更改的箭头名称。所以例如:左,左,上,下,右这个我想将左箭头1改为绿色而不是恢复正常然后因为第二次它将发生两次,因为阵列的前2个元素是“左” ”

所以我一直在尝试在JS中使用setTimeout并尝试查找如何使用它并设法慢慢推进但我在所有解释中都迷失了。

我当前的代码更改了绿色数组中列出的所有箭头,然后将它们1改为1(实际上我根本看不到第一个箭头changin,但我认为它只是setTimeout不适用于它,因为其余的正在改变)。

for (var j = 0; j < narray.length; j++) {

var image = document.getElementById(narray[j]);

 image.src = "arrow-"+narray[j]+"-good.png";
  function(j){
   sesetTimeout(function(){
   var image2 = document.getElementById(narray[j]);
   image2.src = "arrow-"+narray[j]+".png";
}, j*1000);
})(j);

我知道它真的很乱,但我完全迷失在我试图学习的教程中。所以,如果有人能帮助我,我会非常感激。 提前谢谢!

2 个答案:

答案 0 :(得分:0)

这是我认为可行的。

k=0;
for (var j = 0; j < narray.length; j++) {

    var image = document.getElementById(narray[j]);

    image.src = "arrow-"+narray[j]+"-good.png";
    setTimeout(function(){
       var image2 = document.getElementById(narray[k]);
       image2.src = "arrow-"+narray[k]+".png";
       k++;
    }, j*1000+500);
}

除了拼写错误之外,在超时函数中使用for循环中的“j”是一个问题,因为它们稍后运行。所以我们引入“k”来跟踪我们已经完成了多少。所以k每次都会递增,这里它是一个全局变量,所以当每个超时函数实际运行时,k将是一个不同的数字,并且将增加k以准备下一个将被调用的函数。

答案 1 :(得分:0)

如果你不使用for循环并且你将函数称为递归,那会怎么样:

function doSomething(j,l){
    if(j>=l) return 'done';
    setTimeout(function(){
       console.log('step: ' + j + ' from: ' + l);

       // add your code here :)

    }, j*1000);
    doSomething(++j,l);
}
doSomething(0,narray.length); // start with 0 and the length of the array