Question

我在代码库中发现了代码$(document).ready(function() {...}

中的代码$(document).ready(function() {...}

e.g。

$(document).ready(function() {      

    // 20 lines... 

    $(document).ready(function() {
        foo()
    }

    // 200 lines...
}

function foo() {...}

我想了解执行的顺序，所以我可以安全地重构这个嵌套的回调。外部回调似乎在内部回调执行之前继续执行。外部回调是否保证在内部回调被调用之前完成？

Answer 1

外部回调是否可以在内部回调被调用之前完成？

是

document.ready的工作方式是，它会等待readystatechange事件在调用回调之前准备就绪，但是如果readystatechange事件已经被触发，它也会运行setTimeout。

这意味着代码如：

$(function () {
    a();
    $(b);
    c();
});

a，b和c的所有功能都将按以下顺序执行：

a
c
b

在相关的说明中，人们会质疑为什么您希望在另一个document.ready来电中进行document.ready来电，简短的回答是您不会

唯一的好处是$(callback)比写出来更方便：

setTimeout(callback, 0);

Answer 2

您应该删除内部$（文档）.ready并为该回调指定一个名称。然后将其称为外部回调的最后一行。

Answer 3

是。事件侦听器存储在堆栈中，并且在触发事件时一次只弹出一个事件侦听器。这个'ready'监听器只是将另一个'ready'监听器添加到堆栈的末尾。因此，当第一个（外部）全部完成执行时，浏览器继续向下移动...直到它到达第二个（内部），然后执行它。

$（document）.ready在$（document）.ready中

3 个答案: