Question

[answered]

I’m testing my browser’s fps for an html5 game.
I have this code:

var requestAnimationFrame = ( function() {
    return window.requestAnimationFrame || //Chromium 
    window.webkitRequestAnimationFrame || //Webkit
    window.mozRequestAnimationFrame || //Mozilla Geko
    window.oRequestAnimationFrame || //Opera Presto
    window.msRequestAnimationFrame || //IE Trident?
    function(callback) { //Fallback function
        window.setTimeout(callback, 1000/60);
    }
})();

var hits = 0;
var last = new Date().getTime();

var step = (function(){
    now = new Date().getTime();
    hits += 1;
    if( now - last >= 1000 ){
        last += 1000;
        console.log( "fps: "+ hits );
        hits = 0;
    }
    requestAnimationFrame( step );
})();

It gives the following error on Chrome:
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17
On line #27: requestAnimationFrame( step );

W3 says this error is: If the type of an object is incompatible with the expected type of the parameter associated to the object.
But I’m not actually interacting with the DOM at all, except for window

But if I remove the calling parentheses of the anonymous function assigned to step and instead just declare that function and on a new line I put:
step();

It works.
Why is this?
Shouldn’t both work the same?

Answer 1

requestAnimationFrame expects a function, but in your code, step is not a function, it is undefined because you don’t return any value from your self-invoking function.

var step = (function(){
    // this code is executed immediately, 
    // the return value is assigned to `step` 
})();

If you remove the calling parenthesis, then step is indeed a function.

Please see @Martin’s comment to this answer. I was referring to the fact that step is undefined after the function is executed, but of course it is also undefined when you invoke the function the first time.