jQuery的document.ready和自调用匿名函数的区别

Question

141

这两个有什么区别？

这两个函数会同时调用吗？我知道，当整个HTML页面被浏览器渲染后，document.ready将被触发，但是对于第二个函数（自执行匿名函数），它会等待浏览器完成页面渲染还是在遇到它时立即调用？

- Ashit Vora

18

就其价值而言，$(function() {}); 相当于 $(document).ready(function() {});。 - Ian Henry

1

自调用匿名函数将在遇到它时执行。此外，实际在屏幕上呈现文档和在内存中创建对象模型是无关的。 - Anurag

为什么要定义匿名函数并将其作为参数传递给jQuery？与backbone使用哪种模式有关。 - Bergi

4

当有人给出有效答案时，你应该真正接受并采纳。你的采纳率非常低。 - leigero

不使用jQuery的方法是： document.addEventListener('DOMContentLoaded'，function(){...}); - blerg

5个回答

45

(function(){...})();会在JavaScript代码中遇到时立即执行。

$(document).ready()会在文档加载完成后执行一次。$(function(){...});是$(document).ready()的简写形式，两者执行的是完全相同的操作。

- Michal

31

当文档对象模型(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

2

JavaScript 闭包的解释非常简单、清晰和简洁。 - C.O.D.E

26

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

因此，#1是在文档加载时执行，而#2是立即运行的，jQuery对象被命名为$以便使用缩写。

- Alan Christopher Thomas

16

document.ready会在DOM构建完成后运行。而自执行函数会立即运行 - 如果将其插入到<head>标签中，在DOM构建之前就会运行。

- srigi

6

+1 用于抵消不必要的负评。但是，你的回答中存在一个小问题。自执行函数将在解析时出现时立即执行，不一定需要在 <head> 中，并且在初始 DOM 构建后规则并没有改变。 - Anurag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jAndy · Accepted Answer

$(document).ready(function(){ ... }); 或简写为 $(function(){...});

当 DOM 准备就绪时，将调用此函数。这意味着您可以开始查询元素。.ready() 在不同的浏览器上使用不同的方式来确保 DOM 确实已经准备好。
(function(){ ... })();

这只是一个函数，在浏览器解释您的 ECMAScript / JavaScript 时尽可能快地调用自身。因此，在这里成功操作 DOM 元素的可能性非常小。