jQuery document.ready vs self calling anonymous function
Question
What is the difference between these two.
$(document).ready(function(){ ... });(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?
5 answers
solution1
110 2010-07-15 20:06:49
$(document).ready(function(){ ... });or short$(function(){...});This Function is called when the
DOM is readywhich 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 onDOM elementshere.
solution2
46 2010-07-15 20:05:55
(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.
solution3
25 2010-07-15 20:08:31
$(document).ready(function() { ... });simply binds that function to thereadyevent of the document, so, as you said, when the document loads, the event triggers.(function($) { ... })(jQuery);is actually a construct of Javascript, and all that piece of code does is pass thejQueryobject intofunction($)as a parameter and runs the function, so inside that function,$always refers to thejQueryobject. 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.
solution4
24 2015-09-17 01:52:10
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);
solution5
16 2010-07-15 20:02:58
document.ready run after DOM is "constructed". Self-invoking functions runs instantly - if inserted into <head> , before DOM is constructed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.