jquery document.ready multiple declaration

Question

I realized that I can specify $(document).ready(function(){}); more than once.
Suppose like this

$(document).ready(function(){
    var abc = "1122";
    //do something..
});

$(document).ready(function(){
    var abc = "def";
    //do something..
});

Is this standard ? Those codes work on my FF (16.0.2). I just a little afraid that other browser may not.
What actually happen ? How jQuery handle those code ?

Thanks.

Try [this](http://stackoverflow.com/a/1327766/122005) out – chridam Nov 29 '12 at 10:20 — chridam, Nov 29 '12 at 10:20

score 10 · Accepted Answer · edited May 23 '17 at 11:43

10

Yes, it's standard and recommended and jQuery guarantees those functions will be executed in order of declaration (see this related answer for details regarding the implementation).

The abc variable are local to your functions and don't interfere. You cannot see the value of abc declared in one of the callbacks from the other one.

edited May 23 '17 at 11:43

Community

1
1

answered Nov 29 '12 at 10:18

Denys Séguret

372,613
87
782
758

1

Just to add, the main reason this is handy is to allow you to specify `load` handlers in multiple `js` files so you can keep your code compartmentalised. – Rory McCrossan Nov 29 '12 at 10:21
@RoryMcCrossan +1 for an advice I 100% agree with. – Denys Séguret Nov 29 '12 at 10:22
yes, I actually implemented load + multiple js now. Now just curious, can I get the `var abc` in the first declaration (which the value is "1122") without delcaring the `var abc` globally ? – Hendry H. Nov 29 '12 at 10:27
I'm not sure I get your question but if you want to get in the second callback the value of abc declared in the first callback, then you should declare it as `window.abc="1122";`. – Denys Séguret Nov 29 '12 at 10:33
@dystroy yes, that's what I wanted to do. But I've too many multiple js files (with document.ready function each), and some have same variables name inside. Declaring globally like `window.abc` will make it unique, and won't work in my case. I wanted to get certain `var abc` in certain document.ready block. Is it feasible ? – Hendry H. Nov 29 '12 at 10:41
No. You can't get a local variable declared in a function if you don't make an accessor (eg `window.getAbc=function(){return abc}`). In most big applications we use space names to avoid problems : `window.myapp.mymodule = {abc:"1212"};`. – Denys Séguret Nov 29 '12 at 10:44
@dytroy Thx a lot dystro for the explanation. ~ – Hendry H. Nov 29 '12 at 11:01

score 1 · Answer 2 · answered Nov 29 '12 at 10:22

1

Yes, multiple document.ready function can be used in the same page. It will not going to give any error or exception in any browser. and the function will be executed for upper to lower order.

answered Nov 29 '12 at 10:22

Manibhadra

400
4
6

1

"upper to lower" is different from the order in which they were called, which is the true order they will execute – Ian Nov 29 '12 at 10:28

score 0 · Answer 3 · answered Nov 29 '12 at 11:01

0

Even though it's standard, I'd rather use only one $(document.ready) ... to keep it DRY, otherwise you may end up with let's say 10 of these declarations on your page, which will make it look like unmaintanable spaghetti code (but JS allows you to do that too)

answered Nov 29 '12 at 11:01

just_a_dude

2,745
2
26
30

yeah, I actually did that. But then my codes gets more and more lines. After reaching over than > 1k lines, I finally stop and split into multiple js files. With combination of `load` method off course, its become pretty neat now. – Hendry H. Nov 29 '12 at 11:06

jquery document.ready multiple declaration

3 Answers3