for循环中的setTimeout

Question

目前我正在尝试为自己制作一个小游戏，在制作和使用它的过程中获得乐趣，但我卡在了一部分。

我想做一个记忆游戏，程序生成一个特定的数组，其中填充了应该改变的箭头的名称。因此，例如：左，左，上，下，右我想将第一个左箭头更改为绿色而不是恢复正常然后因为第二次它会发生两次因为数组的第一个2元素是"left".

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

我当前的代码更改了绿色数组中列出的所有箭头，然后将它们逐一更改回正常状态（实际上我根本看不到第一个箭头的变化，但我认为它只是 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);

我知道它真的很乱，但我完全迷失在我试图学习的教程中。因此，如果有人可以帮助我，我将非常感激。提前致谢！

Answer 1

以下是我认为可行的方法。

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每次都会递增，这里它是一个全局变量，所以每个超时函数实际上运行s，k会是一个不同的数字，并且会递增k以准备下一个将被调用.

Answer 2

如果你不使用 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

for循环中的setTimeout

setTimeout in for loop

javascript

settimeout