Javascript jQuery document.ready 与自调用匿名函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3259496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery document.ready vs self calling anonymous function
提问by Ashit Vora
What is the difference between these two.
这两者有什么区别。
$(document).ready(function(){ ... });(function(){ ... })();
$(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?
这两个函数是同时调用的吗？我知道，当整个 HTML 页面被浏览器呈现时，document.ready 将被触发，但是第二个函数（自调用匿名函数）呢？它是等待浏览器完成渲染页面还是在遇到它时调用它？
回答by jAndy
$(document).ready(function(){ ... });or short$(function(){...});This Function is called when the
DOM is readywhich means, you can start to queryelements 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 itselfas soon as possible when the browser is interpreting your
ecma-/javascript. Therefor, its very unlikely that you can successfully act onDOM elementshere.
$(document).ready(function(){ ... });或短$(function(){...});当
DOM is ready这意味着您可以开始查询元素时调用此函数。.ready()将在不同的浏览器上使用不同的方式来确保 DOM 真的准备好了。(function(){ ... })();这只不过是一个函数，它会在浏览器解释您的
ecma-/javascript. 因此，您在DOM elements这里成功采取行动的可能性很小。
回答by Michal
(function(){...})();will be executed as soon as it is encountered in the Javascript.
(function(){...})();将在 Javascript 中遇到时立即执行。
$(document).ready()will be executed once the document is loaded. $(function(){...});is a shortcut for $(document).ready()and does the exact same thing.
$(document).ready()将在加载文档后执行。 $(function(){...});是一个快捷方式，$(document).ready()并且做完全相同的事情。
回答by Alan Christopher Thomas
$(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.
$(document).ready(function() { ... });简单地将该函数绑定到ready文档的事件，因此，正如您所说，当文档加载时，事件会触发。(function($) { ... })(jQuery);实际上是 Javascript 的一种构造，这段代码所做的就是将jQuery对象function($)作为参数传入并运行该函数，因此在该函数内部，$始终引用该jQuery对象。这可以帮助解决命名空间冲突等。
So #1 is executed when the document is loaded, while #2 is run immediately, with the jQueryobject named $as shorthand.
所以#1 在文档加载时执行，而#2 立即运行，jQuery对象命名$为速记。
回答by JSON C11
The following code will be executed when the DOM (Document object model) is ready for JavaScript code to execute.
当 DOM（文档对象模型）准备好执行 JavaScript 代码时，将执行以下代码。
$(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:
下面显示的代码是一个自调用匿名 JavaScript 函数，一旦浏览器解释它就会执行：
(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.
下面显示的 jQuery 自调用函数将全局 jQuery 对象作为参数传递给function($). 这使得$可以在自调用函数中本地使用，而无需遍历定义的全局范围。jQuery 不是唯一使用 的库$，因此这减少了潜在的命名冲突。
(function($){
//some code
})(jQuery);
回答by srigi
document.ready run after DOM is "constructed". Self-invoking functions runs instantly - if inserted into <head>, before DOM is constructed.
document.ready 在“构造”DOM 后运行。自调用函数立即运行 - 如果插入到<head>，则在构造 DOM 之前。
