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

Question

我的问题很简单。

我有一些配置和加载需要在 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处理程序完全完成后才发生？

提前非常感谢！

Answer 1

您可以使用deferred：

var soundManagerDeferred = $.Deferred();

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

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

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

Answer 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>.