Javascript function call into loop each time

Question

I have function called rotator(id): this function animate div and I can called this function with different id for animate different elements

Actually I use 5 differents id , 1,2,3,4,5

And for call I need put :

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

The problem it´s that I want to rotate in automatic mode. For this I think to use this

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

But it doesn't work because it animates all in the same time, no let firt execute the first and continue before of first go second , etc , etc and when go the end or number 5 start other time in one

My problem it´s this if you can help me THANKS !!! :) Regards

Maxim Krizhanovsky · Accepted Answer · 2012-08-01 07:01:53Z

4

You are actually calling the rodator(i) function, and schedule for execution after 2 seconds the result of the rodator. In other words, your code is now equalent to:

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

You can accomplish this either by creating a function for the callback:

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

or you can call the next rodator in the rotador function itself:

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

Note: the closure in the second example is needed to call the function with the correct value of i. We are creating an anonymous function, and create i as a local scope variable, which value won't be mutated by the outerscope changes. (we can rename i to n in the local scope, if this would be more readable). Otherwise the value of i will be 5 each time rotador is called, as the value of i would be modified before the actual function call.

edited Aug 1, 2012 at 7:01

answered Jul 31, 2012 at 8:03

Maxim Krizhanovsky

26.8k5 gold badges62 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dan-lee Over a year ago

What's the difference between calling rotador(i) in the timeout closure and returning it as a new function? I am curious :)

Maxim Krizhanovsky Over a year ago

The value of i. We are returning a function in a new scope, when i is defined with the specific value. If we just call it in a function, it will have the value of i of the outer scope, which will be always the last one - 5 in the case

Qnan · Accepted Answer · 2012-07-31 08:08:09Z

3

since setTimeout() does not wait for the function to be executed before continuing, you have to set the delay to a different value for different items, something like 2000 * (i + 1) instead of just 2000

EDIT: yes, and you need the callback as Darhazer suggests

edited Jul 31, 2012 at 8:08

answered Jul 31, 2012 at 8:03

Qnan

3,74421 silver badges15 bronze badges

Comments

Mikhail Payson · Accepted Answer · 2012-07-31 08:07:31Z

1

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
}

answered Jul 31, 2012 at 8:07

Mikhail Payson

9218 silver badges12 bronze badges

1 Comment

Mikhail Payson Over a year ago

Did you remove function rotador(id) { console.log(id); } ?

Richard · Accepted Answer · 2012-07-31 08:03:52Z

0

Use a callback:

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

edited Jul 31, 2012 at 8:03

Richard

8,2903 gold badges39 silver badges60 bronze badges

answered Jul 31, 2012 at 8:02

Tanzeeb Khalili

7,3442 gold badges25 silver badges27 bronze badges

Collectives™ on Stack Overflow

Javascript function call into loop each time

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related