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

Viewed 21121

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.

5 Answers
Related