141

What is the difference between these two.

  1. $(document).ready(function(){ ... });

  2. (function(){ ... })();

Are these both functions called at the same time? I know, document.ready will be triggered when the entire HTML page is rendered by the browser but what about 2nd function (self calling anonymous function). Does it wait for browser to complete rendering the page or it is called whenever it is encountered?

JSON C11
  • 11,272
  • 7
  • 78
  • 65
Ashit Vora
  • 2,902
  • 2
  • 27
  • 39
  • 18
    For what it's worth, `$(function() {});` is equivalent to `$(document).ready(function() {});` – Ian Henry Jul 15 '10 at 20:04
  • 1
    The self calling anonymous function will be executed whenever it is encountered. Also, actually rendering the document on screen and creating the object model in memory are unrelated. – Anurag Jul 15 '10 at 20:07
  • related: [Why define anonymous function and pass it jQuery as the argument?](http://stackoverflow.com/q/10371539/1048572) on which pattern to use with backbone – Bergi Jul 29 '14 at 19:51
  • 4
    You should really accept answers to your questions when they effectively answer it. You have a very low acceptance rate. – leigero Jul 31 '17 at 18:09
  • The non-jQuery way to do the first one is: document.addEventListener( 'domContentLoaded', function(){...} ); – blerg Apr 26 '19 at 16:01

5 Answers5

117

  • $(document).ready(function(){ ... }); or short $(function(){...});

    This Function is called when the DOM is ready which means, you can start to query elements for instance. .ready() will use different ways on different browsers to make sure that the DOM really IS ready.

  • (function(){ ... })();

    That is nothing else than a function that invokes itself as soon as possible when the browser is interpreting your ecma-/javascript. Therefor, its very unlikely that you can successfully act on DOM elements here.

Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 1
    @NimChimpsky I confused (function(){}); with $(function(){}). You are the opposite of the wrong ;) – Alireza Jun 28 '12 at 10:34
  • I'm confused, with respect to `(function(){ ... })();` doesn't any JS code run as soon as possible? If you had say, an `alert()` within in the SIAF or outside of it, wouldn't the effect be the same? – skube Apr 18 '13 at 13:25
  • 2
    @skube Yes, any JS code will run as soon as the parser reads it, but your confusion may be coming in whether there is a "$" in front of the SIAF or not. If so, and this site is using jQuery, then this is the shortened form of the jQuery document.ready helper function, which will schedule the given function to execute once the DOM is available. The helper function itself will run as soon as it is read, but the function you _supply it with_ will not. – Neil Monroe Aug 13 '13 at 16:49
  • Please pay close attention "$", this dollar sign is confusing mostly. $(function(){...}); = Short hand of document.ready (function(){...}); = Self Invoking function. – Muhammad Ali Dec 15 '22 at 11:05
45

(function(){...})(); will be executed as soon as it is encountered in the Javascript.

$(document).ready() will be executed once the document is loaded. $(function(){...}); is a shortcut for $(document).ready() and does the exact same thing.

Michal
  • 995
  • 6
  • 10
31

The following code will be executed when the DOM (Document object model) is ready for JavaScript code to execute.

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

The short hand for the above code is:

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

The code shown below is a self-invoking anonymous JavaScript function, and will be executed as soon as browser interprets it:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

The jQuery self-invoking function shown below, passes the global jQuery object as an argument to function($). This enables $ to be used locally within the self-invoking function without needing to traverse the global scope for a definition. jQuery is not the only library that makes use of $, so this reduces potential naming conflicts.

(function($){
  //some code
})(jQuery);
JSON C11
  • 11,272
  • 7
  • 78
  • 65
26

  1. $(document).ready(function() { ... }); simply binds that function to the ready event of the document, so, as you said, when the document loads, the event triggers.

  2. (function($) { ... })(jQuery); is actually a construct of Javascript, and all that piece of code does is pass the jQuery object into function($) as a parameter and runs the function, so inside that function, $ always refers to the jQuery object. This can help resolve namespacing conflicts, etc.

So #1 is executed when the document is loaded, while #2 is run immediately, with the jQuery object named $ as shorthand.

Alan Christopher Thomas
  • 4,532
  • 2
  • 23
  • 23
16

document.ready run after DOM is "constructed". Self-invoking functions runs instantly - if inserted into <head>, before DOM is constructed.

srigi
  • 1,682
  • 1
  • 15
  • 30
  • 6
    +1 to counter a needless downvote. However, there is a slight problem in your answer. Self-invoking function will execute wherever it is found when parsing, and doesn't necessarily have to be inside the ``, and the rules are no different after the initial DOM has been constructed. – Anurag Jul 15 '10 at 20:14