CODEWITHSUNDEEP
jquery
leonidus
leonidus

Reputation: 373

What happens when we call $(document).ready()

I have a question about $(document).ready(); function in jquery. What does it do. What is the difference between these codes;

1.

$(document).ready(function(){
alert("hello");
});

and this

2.

$(document).ready((function(){
alert("hello");
})();
);

The 1st code defines the anonym function, but where does it call the function. At least , the 2nd function is calling the anonymous function. Please explain this query to me. Thanx in advance.

Upvotes: 0

Views: 117

Answers (4)

André Snede
André Snede

Reputation: 10045

Explanation of the first case
The first one, is an anonymous function that will be called when the DOM etc. is ready and done. It works as you would expect it to.
If you don't know what it does, then I'll explain it briefly here:

What it does, is give the ready function, a function as a parameter, it tells the ready method, to call that method when the DOM(meaning the page) is loaded and ready.

var myReadyFunction = function(){ // Define the method to be called when 
        alert("hello");           // the DOMis ready
    };
$(document).ready(myReadyFunction); // Tell the ready function, to execute 
                                    //this function when the DOM is ready

Explanation of the second case
The second one, must be a mistake by the developer, it is an "immediate function", meaning it will be executed immediatly when the parser sees it. The function:

(function(){
    alert("hello");
})();

- will immediatly alert the string hello and the method will return undefined. Leaving that to be inserted into the ready method:

Meaning, all it does is yell "hello", and become this line afterwards.

$(document).ready(undefined);

Upvotes: 3

Niels
Niels

Reputation: 49919

The first function is called on document ready. $(document).ready, there also is a document load function. The ready function is called when the document is ready (css + js). The load function is called when everything is loaded include the images.

The second function you point out is never used in this way. It's a combination of a anonymous function and document ready. In you function the anonymous function is directly called and the result is passed to the document ready function. If you use it that way you should use it like this:

$(document).ready((function(){
    alert("hello");
}) // No open / close brackets and no ;
);

More info:

  1. jQuery load
  2. jQuery ready

Upvotes: 0

raddevon
raddevon

Reputation: 3340

$(document).ready() binds a callback function to an event. Once the document object's ready event fires, the callback function will be executed. The argument you pass to ready is the function you would like to serve as the callback for that event binding.

Upvotes: 0

ranieuwe
ranieuwe

Reputation: 2296

There are no differences. $(document).ready() is called by jQuery automatically when your document is ready loading (an event is fired and that is then processed). It executes the anonymous function you passed into the ready call. The only thing you did in your second example is passing it once more and executing it.

Upvotes: 0

Related Questions