Javascript: recursive AJAX callbacks and maximum nesting level

Question

I have a problem with understanding, why my code works correctly :)

Here is the part of my code:

function updateForNextLecturer(current_id, all_lecturers, progressbar)
{
    $.getJSON(
        '/' + root + 'custom/ajax/update_timetable_lecturer.php?id=' + all_lecturers[current_id],
        function(data)
        {
            if (data.successfull == 0) {
                $.stickr({note: "Error occurred.", className: "classic error"});
                throw new Error("error");
            }

            else {
                percent = Math.round((current_id + 1) * 100.0 / all_lecturers.length);
                progressbar.progressbar({value: percent});

                if (current_id + 1 < all_lecturers.length)
                    updateForNextLecturer(current_id + 1, all_lecturers, progressbar);
                else 
                    $.stickr({note: "Success", className: "classic"});
            }
        }
    );
}

This code is required to update timetables for all lecturers. Requests are asynchronous and go one after another, thus webserver is not heavily loaded.

To make request going one after another I need to use recursive callbacks (I suppose this is the only solution). And the question is - why this works correctly, isn't there the maximum nesting level like in PHP? In PHP you can get the following error

Fatal error: Maximum function nesting level of '100' reached, aborting!

I tested this function with thousands of requests, so the nesting level is about several thousands, but no error occurred. Is that because there is no nesting limit in JavaScript at all, or because I don't understand something?

Thanks in advance.

While this particular example won't overflow the stack because the async callbacks are always executed on a new stack, [there is a stack size limit that varies by browser](http://stackoverflow.com/a/7828803/201952). — josh3736, Apr 02 '13 at 16:05

Zeta · Accepted Answer · 2013-04-02T16:08:15.850

It's not really recursive. updateForNextLecturer will exit after $.getJSON. When the request is finished your anonymous function will be called. This happens as part of the main-loop which is processing all events, including the execution of your anonymous callback function.

So there's at most one updateForNextLecturer running at a given time and no nested function call at all, except for $.getJSON.

This is the power of asynchronous JavaScript. Things can happen when they're ready.

Running kids analogy

Lets assume you have two kids, Ulec and Jason. You give both a task:

Ulec gives Jason some information he wants to query
Jason gives Ulek the information when he's ready.

Now Ulec starts with his task. He gives Jason his job and Jason runs of. Ulec doesn't wait for anything, Ulec has finished his Job and simply sits there, admiring his environment. He isn't working at all. Meanwhile, Jason gets all needed information and sends it with the mail back to Ulec. Jason has finished his job too.

After a while, Ulec gets his mail and gives Jason another job, until he doesn't have another job for Jason anymore.

In this example Ulec is updateForNextLecturer, while Jason is $.getJSON. The mail is actually the little waiting time you have after the ajax request has succeeded, the event handling in your main loop.

This is a great difference to a recursive call. In this case Ulec would give himself a job, or clone himself to give himself a job. But cloning doesn't work for too long, neither does remembering all the jobs he needs to do.

Javascript: recursive AJAX callbacks and maximum nesting level

1 Answers1

Running kids analogy