calling a function inside setTimeout and inside a function

Question

basically I have written a function:

function animation(){
    setTimeout(
        function(){
        requestAnimationFrame(animation); 
        if (player.currentFrame == player.frames) {
            player.currentFrame = 0;
            } else {
            player.currentFrame++;
            }
        }
    , 1000 / 15);
}

and I'm trying to call it with this code animation(fps);

I tried making it like this:

function animation(fps){
    setTimeout(
        function(){
        requestAnimationFrame(animation); 
        if (player.currentFrame == player.frames) {
            player.currentFrame = 0;
            } else {
            player.currentFrame++;
            }
        }
    , 1000 / fps);
}

and tried to call it with animation(30) but it didn't work. I tried search topic like this but non of them is excatly what I want.

Any help would be appreciated! :)

Mohamed Habib · Accepted Answer · 2013-04-04 14:10:54Z

2

Did you tried this syntax

function animation(fbs){
        requestAnimationFrame(animation); 
        if (player.currentFrame == player.frames) {
            player.currentFrame = 0;
        } else {
            player.currentFrame++;
        }        
       setTimeout(function(){animation(fbs) }, 1000 / fbs);
}

I changed the code from setTimeout('animation(fbs)', 1000 / fbs); to setTimeout(function(){animation(fbs) }, 1000 / fbs);

edited Apr 4, 2013 at 14:10

answered Apr 4, 2013 at 12:27

Mohamed Habib

9031 gold badge9 silver badges18 bronze badges

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

4 Comments

Mohamed Habib Over a year ago

@JeffShaver : why? . I used it before and working fine with me till now

Jeff Shaver Over a year ago

@MuhammadOsman 1) it is slower. Basically, setTimeout will have to run eval() on it to figure out what you want to do and 2) it runs that funciton in a different scope if you pass in a string, so it is possible to run into issues with parameters being undefined. The correct syntax with no params is setTimeout(animation, 1000 /fps); or with params: setTimeout(function() { animation(param1,param2) }, 1000/fps);

Nucleus Over a year ago

hmm.. can you please help me with my question?

Mohamed Habib Over a year ago

@Nucleus can you try the changes as Jeff said and I edit the answer so please check it.

John Koerner · Accepted Answer · 2013-04-04 12:28:05Z

1

setTimeout will only call the function once after the time has elapsed, so unless you call animation again with fps, it will simply run once and be done. You could use setInterval to call the function every 1000/fps milliseconds.

var frame = 0;
animation(20);
function animation(fps){
    console.log(fps)
    setInterval(
        function(){
            console.log("A");
            document.getElementById("sp1").innerHTML = frame;
            frame++;
        }
    , 1000 / fps);
}

Sample fiddle: http://jsfiddle.net/Up4Cq/

Or if you want to use setTimeout, you need to call the animation function again:

function animation(fps){
    console.log(fps)
    setTimeout(
        function(){
            console.log("A");
            document.getElementById("sp1").innerHTML = frame;
            frame++;
           animation(fps);
        }
    , 1000 / fps);
}

Here is the fiddle for setTimeout: http://jsfiddle.net/Up4Cq/1/

edited Apr 4, 2013 at 12:28

answered Apr 4, 2013 at 12:18

John Koerner

38.2k8 gold badges92 silver badges142 bronze badges

1 Comment

Nucleus Over a year ago

yea, i'm sure i want setTimeout, does it work with setTimeout too :/?

Collectives™ on Stack Overflow

calling a function inside setTimeout and inside a function

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related