使用for循环调用setTimeout

Question

我写了一个函数来改变一个div的CSS定位。我一直在成功地使用setTimeout在特定时间间隔内调用该函数。现在我想在同一页上调用28个不同的div，每个div都有自己的速度。我的想法是可以使用for循环来实现，代码如下：

for (var x = 0; x < 28; x++)
   { setInterval(function(){changeDirection(divlist[x])}, divs[divlist[x]].speed);}

使用存储速度和ID的对象'divs'

我能够让它们全部根据计时器移动的唯一方法是像下面这样调用setInterval 28次...

setInterval(function(){changeDirection(divlist[1])}, divs[divlist[1]].speed);
setInterval(function(){changeDirection(divlist[2])}, divs[divlist[2]].speed);
setInterval(function(){changeDirection(divlist[3])}, divs[divlist[3]].speed);
setInterval(function(){changeDirection(divlist[4])}, divs[divlist[4]].speed);....etc

for循环没有起作用......

有人知道为什么吗？有没有一种方法可以像这样使用循环调用多个不同的函数setInterval？

- pepperdreamteam

---

可能是重复的问题：在for循环中使用setTimeout并传递i作为值。 - Bergi

Answer 1

您需要“锚定”循环迭代器的值，否则它会不断增加，并且所有间隔都会影响第29个间隔，但实际上第29个间隔并不存在。

for(var x=0; x<28; x++) {
    (function(x) {
        // code goes here
    })(x);
}

然而，在一页上使用28个计时器是一个非常糟糕的想法。考虑重写您的代码，使其只有一个间隔，根据速度值计算新位置。

- Niet the Dark Absol

---

非常好的答案...谢谢！我很好奇计时器为什么不好，因为在性能方面似乎工作得很好。 - pepperdreamteam

当我同时运行六个计时器时，Firefox 会非常卡顿。至少在我上次测试时是这样的。 - Niet the Dark Absol

Answer 2

我对这些自调用函数的处理方式。

var i = -1;
(function cssPositioning() {
  i++;
  if ( i < 28 ) {
            changeDirection(divlist[i]);
    setInterval(cssPositioning, divs[divlist[i]].speed);
  }
})();

- mikevoermans

Answer 3

根据@Kolink的解释，你可以尝试

for (var x = 0; x < 28; x++){ 
   setInterval(function(){
     var local = x;  //anchor the variable  
     changeDirection(divlist[local])}, divs[divlist[local]].speed);
   });
}

希望这能有所帮助。

- Wei Ma