Order of execution of jquery document ready

Question

Suppose, I have a js file which looks like this:

$(document).ready(function() { // first task} );
$(document).ready(function() { // second task } );
$(document).ready(function() { // third task } );

Upon loading the file the tasks get executed in order. I am not able to understand why ? I'm guessing that the callback methods are fired when an "on ready" event occurs. How is the execution order being retained ? Are the consecutive call backs being queued up in some place ?

Note: I know that this is a very naive way of coding. I have written the snippet only to get my point across and do not write such code in my projects.

Answer 1

Your handlers are being pushed into an array (readyList) for executing in order later, when the document is ready.

They're queued like this:

readyList.push( fn );

And executed when ready like this:

var fn, i = 0;
while ( (fn = readyList[ i++ ]) ) {
  fn.call( document, jQuery );
}

If the document is already ready, then they'll execute immediately, which is still in order.

Answer 2

The functions which you specify are in order added to a list. When the DOM is ready, jQuery iterates through that list and invokes the functions in that order.

Your list becomes something like..

handlers = [ function(){ alert('first') }, function() { alert('second')} ];

Then a loop iterates through...

for ( var i = 0, l = handlers.length; i<l; ++i ) {
    handlers.apply( document, arguments )
}

And the functions are called in the context of the document.

Answer 3

This is not the better, but inside $(window).load you could have more control. after $(document).ready

$(window).load( fn );