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

Posted 2023-05-08

【中文标题】从 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?从 JQuery.load ajax 调用添加到 DOM 的 document.ready 事件的预期行为是什么？

【发布时间】：2018-12-20 05:19:17

【问题描述】：

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

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

<script>    
    console.log(1);

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

    console.log(2)
</script>

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

1
2
3

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

1
3
2

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

【问题讨论】：

您的示例看起来不是有效的语法 - ( 没有匹配的 )

【参考方案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>

【讨论】：

很棒的答案！感谢出色的 sn-ps。所以听起来我要么需要升级到 JQuery v3，要么将我的文档准备好的东西包装在 setTimeout(function(), 0) 调用中。由于我仍然有一些使用 IE8 的主要客户很遗憾，所以我使用了 setTimeout 方法，它就像一个魅力！谢谢！