jquery文档准备好的执行顺序答案

【问题标题】：Order of execution of jquery document readyjquery文档准备好的执行顺序
【发布时间】：2010-10-14 15:00:16
【问题描述】：

假设，我有一个看起来像这样的 js 文件：

$(document).ready(function() { // first task} );
$(document).ready(function() { // second task } );
$(document).ready(function() { // third task } );

加载文件后，任务会按顺序执行。我无法理解为什么？我猜当“准备就绪”事件发生时会触发回调方法。执行顺序如何保留？连续的回调是否在某个地方排队？

注意：我知道这是一种非常幼稚的编码方式。我编写 sn-p 只是为了表达我的观点，不要在我的项目中编写这样的代码。

【问题讨论】：

标签： jquery

【解决方案1】：

当document is ready 时，您的处理程序正在pushed into an array (readyList) 执行in order later。

readyList.push( fn );

var fn, i = 0;
while ( (fn = readyList[ i++ ]) ) {
  fn.call( document, jQuery );
}

如果文档已经准备好了，那么它们会立即执行，这仍然是有序的。

【讨论】：

@Nick：在1.4.3你可以控制执行顺序，不是吗？
@jAndy - 你不能，虽然你可以延迟所有ready处理程序的执行，基本上是说“嘿等等我正在创建更多元素！”。
@Nick：有趣啊。即使我无法想象一个临时用例。
@jAndy - 你可以在这里看到提交：github.com/jquery/jquery/commit/… 最初添加它是为了允许异步脚本加载等完成，票在这里：bugs.jquery.com/ticket/6781
@juanmf 如果不需要等待它，则不要附加准备就绪的侦听器，只需立即附加它 - 如果这不是一个选项，那么就没有技巧，只需绑定它之前。

【解决方案2】：

您指定的函数按顺序添加到列表中。当 DOM 准备就绪时，jQuery 会遍历该列表并按此顺序调用函数。

你的列表变成了……

handlers = [ function(){ alert('first') }, function() { alert('second')} ];

然后循环遍历...

for ( var i = 0, l = handlers.length; i<l; ++i ) {
    handlers.apply( document, arguments )
}

并且函数在文档的上下文中被调用。

【讨论】：

【解决方案3】：

这不是更好，但是在 $(window).load 中你可以有更多的控制权。在 $(document).ready 之后

$(window).load( fn );

【讨论】：