What is the difference between these jQuery ready functions?

Question

what is difference between

$(function(){

});

and

$(document).ready(function() { 

});

You can read the first as "call a function called $ and hand it the defined function to execute". $ there referes to jQuery, which will execute the function you gave it when it is ready. The second would read as "make a jQuery object from document and attach a eventlistener to it that executes the function you gave it when it is triggered by the ready event". — kontur, Sep 03 '12 at 07:23
possible duplicate of [What is jQuery(document) vs. $(document)](http://stackoverflow.com/questions/1058463/what-is-jquerydocument-vs-document) — JasonMArcher, Jun 26 '14 at 22:15

score 58 · Accepted Answer · answered Apr 18 '10 at 15:39

58

Nothing whatsoever.

This function behaves just like $(document).ready(), in that it should be used to wrap other $()

You can see this in the source code:

rootjQuery = jQuery(document);

...

} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

answered Apr 18 '10 at 15:39

SLaks

868,454
176
1,908
1,964

40

There is a difference, $(function(){}) is less readable (to my brain at least). – Rosdi Kasim Apr 19 '10 at 03:27
3

Agree with Rosdi - one is slighty more expressive about what it's actually doing, one is slightly more terse. I prefer the expressive version, thought it's ever so slightly less performant: http://jsperf.com/ready-callback-function-vs-document-ready-function/4 – jrz Sep 10 '12 at 15:57
Also in agreement with an observation: it is that lack of expressiveness in the shorthand version that causes this to be such a popular question. – natchiketa May 18 '13 at 17:57
1

As of jQuery 3.0, only the `$(function() {})` syntax is recommended; the other syntaxes still work but are deprecated. See https://api.jquery.com/ready/ – brass monkey Jan 24 '17 at 10:22
I do not agree, there is a difference. I tried the exact same function with and without `(document).ready` in front of function and with, async loaded the function variable correctly. Without, only loaded initial values of variable, without ever giving new async values. It seems to affect timing, at least on `opera` – jimh Dec 18 '20 at 04:16

score 16 · Answer 2 · answered Mar 03 '11 at 18:19

16

} else if (jQuery.isFunction(selector)) {
    return rootjQuery.ready(selector);
}

From the source

Calling $(document).ready(selector) saves a few if statements.

Although jQuery does cache $(document) internally that might make $(f) faster.

Benchmarked

answered Mar 03 '11 at 18:19

Raynos

166,823
56
351
396

3

If we're talking **that** level of micro-optimisation, you might want to consider the extra 11 bytes needed to transfer the explicit version... – lonesomeday Mar 03 '11 at 18:26
@lonesomeday Well its only 9 bytes. `$(d).ready(f)` vs `$(f)` – Raynos Mar 03 '11 at 18:28
1

True, but please be aware that my above comment is meant somewhat humourously! – lonesomeday Mar 03 '11 at 18:31
@Raynos But then you need to put `var d = document;` at the top or put it inside `(function(d) {` and `})(document);`. :P – alexia Mar 06 '11 at 20:42
@Nyuszika7H any minified code already has `d = document, w = window` – Raynos Mar 07 '11 at 00:02
@raynos: i forgot to thank u, which i should have done few days back. cant accept your answer as it has been merged with another one. But real good work thanx. – Praveen Prasad Mar 10 '11 at 15:06

score 10 · Answer 3 · answered Mar 03 '11 at 18:17

10

Both are equivalent, the first is a shorthand form.

answered Mar 03 '11 at 18:17

BrokenGlass

158,293
28
286
335

1

Are you sure? Does the first one wait for the DOM to load? – Klaus Byskov Pedersen Mar 03 '11 at 18:19
Cool, just wanted to make sure. +1 – Klaus Byskov Pedersen Mar 03 '11 at 18:21

score 7 · Answer 4 · answered Apr 18 '10 at 15:40

7

$(function(){}) is a short cut for the dom ready

A function passed as an argument to the jQuery constructor is bound to the document ready event.

answered Apr 18 '10 at 15:40

makeitmorehuman

11,287
3
52
76

score 7 · Answer 5 · edited Jun 20 '20 at 09:12

7

I suggest you read this. As you can see

All three of the following syntaxes are equivalent:

$(document).ready(handler)

$().ready(handler) (this is not recommended)

$(handler)

So it's up to you and to what you prefer.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 03 '11 at 18:20

foliveira

626
1
8
15

3

`$().ready()` won't work in jQuery 1.4+. `$()` returns an empty selection rather than the document in these circumstances. – lonesomeday Mar 03 '11 at 18:21
3

@lonesomeday That's why there's a **(this is not recommended)** in front of it. – foliveira Mar 03 '11 at 18:23

score 7 · Answer 6 · answered Mar 03 '11 at 18:20

The two are exactly equivalent: use whichever form you like.

That said, I personally always use the expanded form $(document).ready(function(){}); for the simple reason that it is completely obvious what the code is doing. The approximate idea is that of "self-documenting code". Anyone coming to the code later on will immediately see that the code is to be run on the document's ready event. With the short-hand form, you have to rely upon the reader of your code understanding the meaning.

score 6 · Answer 7 · answered Oct 08 '13 at 22:22

6

We have run into situations where IE9 does not run functions within $(function() {}); in the same manner or timing as $(document).ready(function(){});

The issue reared its head for us specifically in reading information out of a query string and processing and displaying that information on the screen, or using it to process a form. IE9 would process the information once it was cached with $(function(), and a user refreshed the page. But on first run, nothing worked right. However, once we switching from $(function(){}); to $(document).ready(), the issue was fixed. We changed NOTHING else.

I so look forward to the day I don't have to test for IE9 and lower.

answered Oct 08 '13 at 22:22

Will Lanni

923
12
25

1

document.ready is not connected to the same "native" event for all browsers... you can get one of these: [document.DOMContentLoaded] or [window.load] or [document.onreadystatechange]. I suppose that's the reason why you get a different action in IE, I suppose (without verification) that the $(document).ready(...) is not connected to the same native DOM event than $(function(){}) – foxontherock Oct 28 '15 at 16:58
1

I experienced this on `opera` as well. I have upvoted your answer because I had the exact same issue. (using jquery 3.5) – jimh Dec 18 '20 at 04:18

score 5 · Answer 8 · answered Mar 03 '11 at 18:19

5

They're effectively the same. No difference.

This is the native way.

$(document).ready(function() {
    // code
});

And this is a shorthand for the previous.

$(function() {
    // code
});

jQuery source code

answered Mar 03 '11 at 18:19

alexia

14,440
8
42
52

There is a comment on this thread - http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document - that the use of the shorthand can lead to `TypeError: 'undefined' is not a function` errors occasionally. – crmpicco May 21 '13 at 13:23
@crmpicco Except that thread mentions `$(document)`, so you probably mean the `$` shorthand for `jQuery`. – alexia Feb 12 '14 at 17:58

score 2 · Answer 9 · answered Mar 03 '11 at 18:17

2

I use $(function() {}); because it's shorter. As far as I know there is no difference between the two ways of doing it.

answered Mar 03 '11 at 18:17

Richard Dalton

35,513
6
73
91

score 0 · Answer 10 · answered Oct 13 '21 at 11:42

jQuery recommends to use $( fn ).

$(document).ready(function() {}); or $(document).on("ready", fn); will cause the function to be called when the document is ready, but only if it is attached before the browser fires its own DOMContentLoaded event. That makes it unreliable for many uses, particularly ones where jQuery or its plugins are loaded asynchronously after page load.

For more info, please look into jquery-migrate

What is the difference between these jQuery ready functions?

10 Answers10

Linked

Related