35

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • they will be executed in the order you write them, try alerting the global var, and you will get your answer – Ibu Jun 22 '11 at 06:40
  • 2
    @Ibu: That will give him/her the answer on the browser(s) he/she tests, in his/her test, which is not the same as knowing what it's *supposed* to do, cross-browser, in the real world. Experimentation is good, but it has limits. – T.J. Crowder Jun 22 '11 at 06:45

5 Answers5

34
  1. Will both these ready event function get fired ?

Yes, they will both get fired.

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

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

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

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

SMR
  • 6,628
  • 2
  • 35
  • 56
Shef
  • 44,808
  • 15
  • 79
  • 90
  • 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 ;) – Rafael Herscovici Jun 22 '11 at 07:41
  • 1
    @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. – Shef Jun 22 '11 at 07:54
  • 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. – Rafael Herscovici Jun 22 '11 at 08:03
  • 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? – Shef Jun 22 '11 at 08:17
10

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.
Community
  • 1
  • 1
jensgram
  • 31,109
  • 6
  • 81
  • 98
2

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.

Dave Ward
  • 59,815
  • 13
  • 117
  • 134
  • *"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). – T.J. Crowder Jun 22 '11 at 06:43
  • Any browser currently supported by jQuery at the time of writing. – Dave Ward Jun 22 '11 at 06:51
-1

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(); ;)

Kevin Adolfsson
  • 64
  • 2
  • 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. – Shef Jun 22 '11 at 07:07
-1
  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.
Itai Sagi
  • 5,537
  • 12
  • 49
  • 73