从 JQuery.load ajax 调用添加到 DOM 的 document.ready 事件的预期行为是什么？

Question

我有一个网站同时加载多个 JQueryUI 对话框 windows。我使用 JQuery.load ajax call 获得每个对话框 windows 的 HTML。这些对话框的内容有时也可能作为单独的网页加载，因此每个对话框都有自己的 $(document).ready() 函数（或 shorthand 的 $(function(){})） .我不确定 $(document).ready() 函数在原始文档完全加载后由 ajax 加载时应该如何表现。

我运行发现了一些奇怪的功能。出于某种原因，运行在 document.ready 事件 到达声明 的那一刻，就好像它是顺序代码而不是事件赋值一样。例如：

<script>    
    console.log(1);

    $(function () {
        console.log(3);
    }

    console.log(2)
</script>

我认为由于 JS 的单线程特性和事件冒泡，它会等到全局级别脚本完成后才执行。换句话说，我希望这是输出：

1
2
3

但由于某种原因它实际上输出：

1
3
2

知道为什么会发生这种行为吗？

Answer 1

您正在处理一个 jQuery 函数，而不是真正的 DOM 事件，因此，您被绑定到 jQuery 对 their function 的实现。

很难确切地说出他们在做什么，因为这种行为在图书馆的发展过程中确实发生了变化...

但基本上，如果函数应该等待的事件已经触发，似乎有两种主要情况：

他们直接执行传递的回调（显然直到 jQuery 3）
他们在 $.deferred 调用中执行传递的回调，即 Promise（自 jQuery 3）

window.onload = e => {
  console.log('start of window onload');
  $(()=>console.log('$ready')); // executed synchronously
  console.log('end of window onload');
};

<!-- jQuery < 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

window.onload = e => {
  console.log('start of window onload');
  $(()=>console.log('$ready')); // deferred
  console.log('end of window onload');
};

<!-- jQuery >= 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

从 JQuery.load ajax 调用添加到 DOM 的 document.ready 事件的预期行为是什么？

What is the expected behavior of a document.ready event that is added to the DOM from a JQuery.load ajax call?

javascript

ajax

jquery

jquery-ui

document-ready