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 · Answer 1 · 2013-04-04T14:10:54.307

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 04 '13 at 14:10

answered Apr 04 '13 at 12:27

Mohamed Habib

883
1
8
18

@JeffShaver : why? . I used it before and working fine with me till now – Mohamed Habib Apr 04 '13 at 12:33
@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);` – Jeff Shaver Apr 04 '13 at 12:41
hmm.. can you please help me with my question? – Nucleus Apr 04 '13 at 13:48
@Nucleus can you try the changes as Jeff said and I edit the answer so please check it. – Mohamed Habib Apr 04 '13 at 14:12

John Koerner · Answer 2 · 2013-04-04T12:28:05.177

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/

yea, i'm sure i want setTimeout, does it work with setTimeout too :/? — Nucleus, Apr 04 '13 at 12:22

calling a function inside setTimeout and inside a function

2 Answers2

Linked