How many $(document).ready() function can we use in a single html file or in a single javascript file?

$(document).ready(function(){
     alert("first document ready");
     //do some action here
});

$(document).ready(function(){
     alert("second document ready");
     //do some action here too
});

If we can use infinite, how will they be invoked? Will they execute line by line or is there any algorithm for calling this?

How many $(document).ready() function can we use in a single html file or in a single javascript file?

$(document).ready(function(){
     alert("first document ready");
     //do some action here
});

$(document).ready(function(){
     alert("second document ready");
     //do some action here too
});

If we can use infinite, how will they be invoked? Will they execute line by line or is there any algorithm for calling this?

• javascript
• jquery

8 Answers 8

Well, I believe 'As much as you want'. But I would prefer to keep my code neat.

There is no limit to some extent (until performance bees an issue). They are just event listeners for when the document is ready.

Its not the same as say Page_Load event in ASP.NET C#

I generally limit to one "document ready" function per javascript file however, for organisation purposes.

You can use as many $document.ready() functions as you would like. See this explanation.

Despite this ability, I would limit the use of this function to as few times as possible, to avoid scattering your script that executes on page load across the application.

You can define as many listeners on document.ready as you like. The event will be fired once, and every listener called once.

However the order of attachment to the event does not guarantee the order of execution. There's no promise that the second document.ready will fire after the first.

We can attach many listeners to same event of java script. No maximum limits until the execution start causing script timeout. :). Java script is single threaded by default. So one by one execution will occur. I guess the order should be the order in which we attach event. But not sure. Good question. Need to try this to see the order.

UNLIMITED.

I suppose you can have multiple of them and all of them will be executed one by one when the document is ready. I tried the same for click event and it works.

But why would you do such a thing ?

"If we can use infinite, how will they be invoked? Will they execute line by line or is there any algorithm for calling this?"

You obviously can't attach a literally infinite number of handlers, but there's no specific limit.

jQuery will execute the handlers in the order they are attached - behind the scenes jQuery binds its own handler to the event once, and keeps a list of all the handlers you've supplied.

This event-handling proxy concept applies to handlers for other events bound with jQuery, not just document ready, though document ready has a special case that if you try to bind a ready handler after the document is ready it will be executed "immediately" (not really "immediately" because it is done via a setTimeout() call so that it is done asynchronously, but near enough).

I found a very nice answer about it in stackoverflow itself

https://stackoverflow./a/1327766/1225190

Here is some more reference about it

Multiple $(document).ready()

Tutorials:Multiple $(document).ready()