jQuery文档。准备好与自调用匿名函数

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?

这两个函数是同时调用的吗?我知道,文档。当整个HTML页面由浏览器呈现时，就会触发，但是第二个函数(self调用匿名函数)会触发。它是等待浏览器完成页面渲染，还是在遇到页面时调用它?

5 个解决方案

#1

107

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

当DOM准备好时调用此函数，这意味着您可以开始查询元素，例如.ready()将在不同的浏览器上使用不同的方法来确保DOM真的准备好了。
(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.

当浏览器正在解释您的ecma-/javascript时，这只不过是一个尽快调用自身的函数。因此，您不太可能在这里成功地处理DOM元素。

#2

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

(函数(){…})();将在Javascript中遇到时立即执行。

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

$(文档).ready()将在加载文档后执行。$(函数(){…});是$(document).ready()的快捷方式，并执行相同的操作。

#3

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

$(文档)时函数(){…});简单地将该函数绑定到文档的就绪事件，因此，正如您所说的，当文档加载时，事件触发。
(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.

(函数(美元){…})(jQuery);实际上是Javascript的一个构造，而这段代码所做的就是将jQuery对象作为参数传入函数($)并运行函数，因此在这个函数中，$总是指向jQuery对象。这可以帮助解决命名空间冲突等等。

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

因此，当加载文档时，将执行#1，同时立即运行#2，使用名为$的jQuery对象作为简写。

#4

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对象作为参数传递给函数($)。这允许在自调用函数中本地使用$，而不需要遍历定义的全局范围。jQuery并不是唯一使用$的库，因此可以减少潜在的命名冲突。

(function($){
  //some code
})(jQuery);

#5

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

文档。DOM被“构建”后就可以运行了。自调用函数立即运行——如果插入到，则在构造DOM之前。

#1

107

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

当DOM准备好时调用此函数，这意味着您可以开始查询元素，例如.ready()将在不同的浏览器上使用不同的方法来确保DOM真的准备好了。
(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.

当浏览器正在解释您的ecma-/javascript时，这只不过是一个尽快调用自身的函数。因此，您不太可能在这里成功地处理DOM元素。

#2