在继续使用 document.ready 代码之前等待第一个事件完成答案

【问题标题】：waiting for first event to finish before continuing with document.ready code在继续使用 document.ready 代码之前等待第一个事件完成
【发布时间】：2014-01-10 21:41:28
【问题描述】：

我的问题很简单。

我有一些配置和加载需要在调用 document.ready() 之前完成。

// initialize ASAP so it loads super fast
soundManager.setup({
    url: 'swf/',
    onready: SMOnReadyHandler
});

这个onready 事件处理程序可能需要很长时间才能完成。

在此之后，我想调用 document.ready() 事件监听器来加载我的页面的其余部分，如下所示：

$(document).ready(function() { 
    // code here might be dependent on the completion of 
    // soundManager.onready event handler 
});

如何确保 $(document).ready 仅在 soundManager.onready 处理程序完全完成后出现？

提前非常感谢！

【问题讨论】：

onready函数是做什么的？或者它甚至是一个函数？
您可能想发明自己的事件来替换 $(document).ready()，如 Alxandr 对问题的回答所示：stackoverflow.com/questions/7135752/…
@JayHarris: onready 持有分配给它的方法，类似于window.onload = function() { ... }
如果您可以访问该功能，那么我认为您的答案如下。

标签： javascript jquery events

【解决方案1】：

你可以使用deferred:

var soundManagerDeferred = $.Deferred();

soundManager.setup({
    url: 'swf/',
    onready: SMOnReadyHandler
});

function SMOnReadyHandler() {
    soundManagerDeferred.resolve();
}

$(document).ready(function() {
    soundManagerDeferred.done(function() {
        //init
    });
});

【讨论】：

我想这看起来像我需要的。你知道任何关于延迟对象的好教程吗？我不熟悉他们。我认为我真正想要的是一种链接异步回调的方法，以便它们的执行顺序很重要。
试试这个网站。请务必检查此页面底部的两个链接：learn.jquery.com/code-organization/deferreds

【解决方案2】：

你不能，因为浏览器决定了 DOM 何时准备就绪。我的建议是，只需删除您的 document.ready 处理程序，并将您的启动功能传递给声音管理器的onready。我的意思是，替换这个：

$(document).ready(function() { 
    // do init stuff 
});

有了这个：

function initStuff() {
    // do init stuff 
}
soundManager.setup({
    url: 'swf/',
    onready: initStuff
});

为确保您不会引用任何不在 DOM 中的元素，请将代码添加到 html 的末尾，就在 </body> 之前。

【讨论】：

这不会破坏尽早开始加载 SoundManager 配置的全部意义吗？使用您的代码，我实际上是在做 $(document).ready(function() { soundManager.setup(); }); ，对吗？
嗯，差不多。如果你有一个沉重的 DOM，它会有所作为。但它保证 document.ready 的东西只在声音加载后运行。杰森的回答更优雅。