Javascript函数每次都会调用循环

Question

我有一个名为rotator(id)的函数:这​​个函数为div设置动画，我可以使用不同的id调用这个函数来为不同的元素设置动画

实际上我使用了5个不同的id，1,2,3,4,5

对于调用，我需要放置:

rotador(1);rotador(2);rotador(3);rotador(4);rotador(5);

问题是我想以自动模式旋转。为此我想使用这个

for (i=0;i<=5;i++) { 
   setTimeout(rotador(i),2000);
}

但是它不起作用，因为它同时对所有动画进行动画处理，不允许先执行第一个并在第一个执行第二个之前继续，等等，等等，当执行结束或数字 5 开始其他时间时

我的问题就是这个，如果你能帮助我，谢谢! :) 问候

Answer 1

您实际上是在调用 rodator(i) 函数，并安排在 rodator 的结果 2 秒后执行。换句话说，您的代码现在等于:

for (i=0;i<=5;i++) { 
   var result = rotador(i);
   setTimeout(result,2000);
}

您可以通过创建回调函数来完成此操作:

for (i=0;i<=5;i++) { 
   setTimeout((function(i){
      return function(){
        rotador(i);
      }
    })(i),2000 * i);
}

或者您可以在 rotador 函数本身中调用下一个 rodator:

var rotador = function(i){
    // your code
    if (i < 5) {
       setTimeout(function(){rotaror(i + 1);}, 2000);
    }
}

注意:第二个示例中的闭包需要使用正确的 i 值来调用函数。我们正在创建一个匿名函数，并创建 i 作为局部作用域变量，该值不会因外部作用域的更改而改变。 (我们可以在本地范围内将 i 重命名为 n，如果这样更具可读性)。否则，每次调用 rotador 时，i 的值将为 5，因为 i 的值会在实际函数调用之前被修改。