How does jQuery avoid recursion with its animate function callback?
I've run the following code and looked at the stack
- (function() {
- var i = 0, max = 20, move, $box = $('#box');
-
- move = function() {
- if(i < max) {
- $box.animate({
- //some animation parameters
- }, move);
- } else {
- debugger;
- }
- i+=1;
- };
-
- move();
- })();
This was run on Firefox 3.6 with Firebug. When it stops at debugger, the stack looks like it only has some jQuery functions and my move function. I would expect the stack to include several layers of move/animation invocations. The fact that it doesn't is very interesting to me because it means jQuery is able to avoid recursion here in some way.
How does it do that? I've racked my brain writing a function f that takes a callback parameter (the callback itself calling f), but I always get a recursion stack i.e f, callback, f, callback, etc. I also took a look at the jQuery source. I noticed that jQuery seems to invoke the callback using the call prototype method. I also noticed there's some kind of queuing that jQuery does and the callback is somehow queued (I think). However, I don't see how either of those two things allows jQuery to avoid a recursion in the above example.
Any help would be much appreciated!