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);
}

但它不起作用，因为它在同一时间动画所有，不让firt执行第一个并在第一个第二个之前继续等等，当结束或第5个开始其他时间在一个

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

Answer 1

你实际上是在调用rodator（i）功能，并在2秒后安排执行Rodator的结果。换句话说，您的代码现在符合以下条件：

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作为局部范围变量，该值不会被outerscope变化所突变。（我们可以在本地范围内将i重命名为n，如果这样更可读的话。否则，每次调用rotador时i的值将为5，因为i的值将在实际函数调用之前被修改。

Answer 2

由于setTimeout（）在继续之前不等待函数执行，因此您必须将延迟设置为不同项的不同值，例如2000 * (i + 1)而不是2000

编辑：是的，你需要回调，因为Darhazer暗示

Answer 3

rotationStep(1);

function rotador(id)
{
    console.log(id);
}

function rotationStep( currentId )
{
    rotador(currentId);
    var nextId = currentId<5 ? currentId+1 : 1;
    setTimeout(function(){ rotationStep(nextId) },2000); //anonymous function is a way to pass parameter in IE
}

Answer 4

使用回调：

setTimeout(function() {
    rotador(i)
}, 2000)

Javascript函数每次调用循环

4 个答案: