setTimeout for循环

Question

目前，我正尝试自己制作一个小游戏，以使其在使用和使用过程中获得乐趣，但我陷入了困境。

我想做一个记忆游戏，程序会生成一个特定的数组，其中填充了应该更改的箭头名称。 因此，例如：left，left，up，down，right，我想将左箭头1st只更改为绿色，而不是恢复为正常，那么自第二次以来，它将发生两次，因为数组的第1个2个元素是“ left ”。

因此，我一直在尝试在JS中使用setTimeout，并尝试查找它的使用方法并设法使其缓慢前进，但是我在所有解释中都迷糊了。

我当前的代码将绿色数组中列出的所有箭头更改为绿色，然后将它们改回到正常的1比1（实际上我根本看不到第一个箭头的变化，但是我认为它只是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每次都会递增，这是一个全局变量，因此当每个超时函数实际运行时，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