javascript - jQuery document.ready vs self calling anonymous function

Question

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?

Answer 1

• $(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.