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.

Solution 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.

Solution 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.

Solution 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.

Comments

[T.J. Crowder]

"in any current browser" Or in any other browser, it's jQuery that ensures the order (as it does with all event handlers hooked up with jQuery, to deal with the fact that Microsoft went one way with the order and everyone else went the other).

[rlorenzo]

Any browser currently supported by jQuery at the time of writing.

[Shef]

Why would the ajax handler include a doc ready? Once you inject your HTML element, returned from the ajax response, it would be ready for your ajax handler to manipulate. There is no need for it to wait for a ready event.

[Rafael Herscovici]

nice answer, just a small comment on #3: it is not OK.. even if possible, you should implement best practices and not get used to bad habbits. i can drive my car in reverse, but i would not do it all the time ;)

[Shef]

@Dementic: Yes, you are right, it's best practice to keep it in one place. However, there is room for discussion here, because if s/he has two big files and in one place s/he needs to load one of them, and somewhere else s/he needs to load both of them, then it's much more logical to have a few lines of doc ready repeated on both files, rather than include both files or pollute the logical flow with ifs and all other stuff.

[Rafael Herscovici]

yes and no. personally, in the case you describe ( having two or more files with onload functions ) i would have made anothe js file, which has only the onload functions.

[Shef]

With some if statements in it? If yes, then it's like I described in my comment above. How else would you handle which to run when?