What happens when you have two jQuery $(document).ready calls in two JavaScript files used on the same HTML page?

Question

I have a question on jQuery $(document).ready

Let's say we have a HTML page which includes 2 JavaScript files

<script language="javascript" src="script1.js" ></script>
<script language="javascript" src="script2.js" ></script>

Now let's say in both these script files, we have $(document) as follows

Inside script1.js:

$(document).ready(function(){
    globalVar = 1;
})

Inside script2.js:

$(document).ready(function(){
    globalVar = 2;
})

Now my Questions are:

1. Will both these ready event function get fired ?
2. If yes, what will the order in which they get fired, since the document will be ready at the same time for both of them?
3. Is this approach recommended OR we should ideally have only 1 $(document).ready ?
4. Is the order of execution same across all the browsers (IE,FF,etc)?

Thank you.

Answer 1

1. Will both these ready event function get fired ?

Yes, they will both get fired.

2. what will the order in which they get fired, since the document will be ready at the same time for both of them?

In the way they appear (top to bottom), because the ready event will be fired once, and all the event listeners will get notified one after another.

3. Is this approach recommended OR we should ideally have only 1 $(document).ready ?

It is OK to do it like that. If you can have them in the same block code it would be easier to manage, but that's all there is to it. Update: Apparently I forgot to mention, you will increase the size of your JavaScript code if you do this in multiple files.

4. Is the order of execution same across all the browsers (IE,FF,etc)?

Yes, because jQuery takes the cross-browser normalization at hand.

Answer 2

See here: jQuery - is it bad to have multiple $(document).ready(function() {}); and here: Tutorials:Multiple $(document).ready()

1. Yes
2. Order of attach. jQuery internally maintains a readyList with Deferred objects.
3. It's partially a matter of taste. Having one ready handler will give you a nice overview of all that is happening, while multiple (i.e., one per included file) will make your code much more modular (i.e., you can include or remove a .js file and be sure that it provides and binds its own ready handler).
4. Yes - order of attach.

Answer 3

You can count on both handlers being executed in order of their script inclusion and globalVar being 2 after the second script reference, in any current browser.

Answer 4

If you want full control I strongly recommend only one $(document).ready();

If you load partial portions of HTML through ajax and the ajax response includes a $(document).ready();-script and you want to fire $(document).ready(); from script1.js, script2.js and so on in the ajax callback.. You have to duplicate PLENTY of code....

Good Luck!

/ $(window).ready(); ;)

Answer 5

1. Both will get fired
2. The value of the variable will be 2 once all the dust has settled.
3. The main thing which isn't recommended is using 2 different JS files, as Google PageSpeed, and Yahoo YSlow recommends, it's best to have all your Javascript codes in the same file. as far as same event handlers, well, in all honesty, I see no reason why to do that, and it'll only make your code readability lousier.
4. I have no answer for that.