jQuery document.ready vs 自调用匿名函数答案

【问题标题】：jQuery document.ready vs self calling anonymous functionjQuery document.ready vs 自调用匿名函数
【发布时间】：2025-12-11 06:40:01
【问题描述】：

这两者有什么区别。

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

【问题讨论】：

【解决方案1】：

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

这个函数在DOM is ready时被调用，也就是说，你可以开始查询元素。 .ready() 将在不同的浏览器上使用不同的方式来确保 DOM 真的准备好了。
(function(){ ... })();

这不过是在浏览器解释您的ecma-/javascript 时尽快调用自己的函数。因此，您不太可能在此处成功对DOM elements 采取行动。

【讨论】：

@NimChimpsky 我很困惑 (function(){});与 $（函数（）{}）。你是错误的对立面；）
我很困惑，关于(function(){ ... })(); 没有任何JS代码尽快运行吗？如果你说，在 SIAF 之内或之外的 alert()，效果不一样吗？
@skube 是的，任何 JS 代码都会在解析器读取后立即运行，但您可能会混淆 SIAF 前面是否有“$”。如果是这样，并且该站点正在使用 jQuery，那么这是 jQuery document.ready 辅助函数的缩写形式，它将安排给定函数在 DOM 可用时执行。辅助函数本身将在读取后立即运行，但您为其提供的函数不会。

【解决方案2】：

(function(){...})(); 在 Javascript 中一遇到就会被执行。

$(document).ready() 将在文档加载后执行。 $(function(){...}); 是 $(document).ready() 的快捷方式，作用完全相同。

【讨论】：

【解决方案3】：

当 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);

【讨论】：

【解决方案4】：

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

所以 #1 在文档加载时执行，而 #2 立即运行，使用名为 $ 的 jQuery 对象作为简写。

【讨论】：

【解决方案5】：

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

【讨论】：

+1 反对不必要的反对票。但是，您的回答有一个小问题。自调用函数在解析的时候会在找到的地方执行，不一定非要在<head>里面，在初始DOM构建完成后规则也一样。