$(document).ready 里面 $(document).ready

Question

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

例如

$(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是所有函数将按以下顺序执行：

1. a
2. c
3. b

---

在相关的注释中，人们会质疑为什么您希望在另一个 document.ready 呼叫中运行 document.ready 呼叫，简短的回答是您不会。

唯一的收获是$(callback)比写起来方便一点：

setTimeout(callback, 0);

Answer 2

您应该删除内部 $(document).ready 并为该回调分配一个名称。然后将其作为外部回调的最后一行调用。

Answer 3

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