jQuery document.ready与自调用匿名函数

137

两者之间有什么区别。

$(document).ready(function(){ ... });
(function(){ ... })();

这两个功能是否同时调用？我知道，当整个HTML页面由浏览器呈现时，document.ready将被触发，但是第二个函数（自调用匿名函数）呢？它是等待浏览器完成页面渲染还是在遇到页面时调用它？

javascript jquery

— 阿希特·沃拉（Ashit Vora）
source

18

对于它的价值，$(function() {});等同于$(document).ready(function() {});

— 伊恩·亨利

1

自调用匿名函数将在每次遇到时执行。同样，实际上在屏幕上渲染文档和在内存中创建对象模型也不相关。

— 阿努拉格

相关：为什么要定义匿名函数并将jQuery作为参数传递给它？使用哪种模式与主干网

— Bergi 2014年

4

当他们有效回答问题时，您应该真正接受问题的答案。您的接受率很低。

— leigero

使用jQuery的非jQuery方法是：document.addEventListener（'domContentLoaded'，function（）{...}）;

— Evan Thompson

112

$(document).ready(function(){ ... }); 或短 $(function(){...});

当DOM is ready表示可以开始查询元素时，将调用此函数。.ready()将在不同的浏览器上使用不同的方式来确保DOM确实可用。
(function(){ ... })();

这无非是一个功能，当浏览器解释您的时，该功能会尽快调用自身ecma-/javascript。因此，您不可能成功地在DOM elements此处采取行动。

— 安迪
source

1

@NimChimpsky我感到困惑（function（）{}）; 与$（function（）{}）。您是错误的对立面；）

— ALH

我很困惑，关于(function(){ ... })();是否没有尽快运行任何JS代码？如果您说的alert()是SIAF 的内部还是外部，效果会不会一样？

— skube 2013年

2

@skube是的，只要解析器读取它，任何JS代码都将运行，但是您可能会因为SIAF前面是否有“ $”而感到困惑。如果是这样，并且此站点使用的是jQuery，则这是jQuery document.ready helper函数的简化形式，它将安排给定的函数在DOM可用时执行。辅助函数本身将在读取后立即运行，但是您提供给它的函数将不会运行。

— 尼尔·梦露

46

(function(){...})(); 将在Javascript中遇到后立即执行。

$(document).ready()加载文档后将执行。 $(function(){...});是它的快捷方式，$(document).ready()并且功能完全相同。

— 米哈尔
source

25

$(document).ready(function() { ... });只需将该函数绑定到ready文档的事件，因此，正如您所说的，当文档加载时，事件触发。
(function($) { ... })(jQuery);实际上是Javascript的构造，所有代码段所做的只是将jQuery对象function($)作为参数传递给它并运行该函数，因此在该函数内部$始终引用该jQuery对象。这可以帮助解决命名空间冲突等问题。

因此，在加载文档时执行＃1，而在立即运行＃2时将jQuery对象命名$为速记。

— 艾伦·克里斯托弗·托马斯
source

25

当DOM（文档对象模型）准备好执行JavaScript代码时，将执行以下代码。

$(document).ready(function(){
  // Write code here
});

上面代码的简写为：

$(function(){
  // write code here
});

下面显示的代码是一个自调用的匿名JavaScript函数，将在浏览器解释后立即执行：

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

如下所示的jQuery自调用函数将全局jQuery对象作为参数传递给function($)。这使得$可以在自调用功能中本地使用，而无需遍历定义的全局范围。jQuery不是唯一使用的库$，因此可以减少潜在的命名冲突。

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

— JSON C11
source

2

非常简单，清晰，简洁的javascript闭包说明。

— CODE

16

在DOM被“构造”之后运行document.ready。自调用功能可<head>在DOM构建之前立即运行-如果插入到中，则可以立即运行。

— 斯里吉
source

6

+1以抵消不必要的降票。但是，您的回答中有一个小问题。自动调用功能将在解析时在任何地方执行，并且不一定必须在内<head>，并且在构造初始DOM之后，规则也没有不同。

— 阿努拉格