使用for循环调用setTimeout

calling setTimeout with a for loop

本文关键字：setTimeout 调用 循环 for 使用      更新时间：2023-09-26

我编写了一个函数，它可以更改div 的css位置

我已经成功地使用setTimeout在特定的时间间隔调用函数

现在，我要做的是在同一页上的28个不同div上调用该函数，每个div都有自己的速度。

我的想法是，我可以用一个像这样的for循环来做这件事：

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

使用存储速度和id的对象"div"

我唯一能让他们都逆着计时器移动的方法就是调用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

您需要"锚定"循环迭代器的值，否则它会不断递增，所有的间隔都会影响第29个，而第29个间隔并不存在。

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

然而，在一个页面上显示28个计时器是一个非常糟糕的主意。考虑重写代码，这样您就只有一个基于速度值计算新位置的间隔。

我对这些自调用函数的方法。

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

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

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

希望这能有所帮助。

相关文章：