Endless animations, requestAnimationFrame and call stack limits

Question

I have a little project that I'm working on that consumes the twitter streaming API and makes a little canvas animation from it. Given that the twitter streaming API doesn't conclude, the animation could go on indefinitely.

Therein lies the problem. requestAnimationFrame appears to operate through recursion, and we don't get proper tail calls until ES6, meaning that I think this grows the call stack for every frame.

The question is, am I right that this'll eventually raise an error for exceeding the maximum call stack size, or does the browser play a trick to avoid the limit? Is requestAnimationFrame really doing something strange that I don't understand (perhaps along the lines of a setInterval not being recursive)?

In chrome 36.0.1985.32 beta (which has a call stack size of 20834), I am testing with:

function test(t) {
    requestAnimationFrame(test);
}

test(performance.now());

And have seen no issues. I would expect an RangeError to be thrown ~6 minutes assuming 60fps.

Another misleading information is shown in the Call Stack section of the chrome developer tools window, where it is shown the requestAnimationFrame Call stack as it would fill up the stack, as show in the following image:

Answer 1

RAF will launch the function "on the next drawn frame". That's means that it will be executed in another stack of action, and you won't have any maximum call stack error.