摘要：本文关键点和页面上的成功回调到底哪个先触发。自己给了一个合理的解析会在当前任务队列的最后一个触发。如最开始的例子，异步，尚未给出结果，页面需要等待的所有内容已经完成，任务队列为空，因此触发。
本文首发我的博客 - blog.cdswyda.com，转载务必保留作者和出处，以便追溯和错误修正。
本文关键点: window.onload 和 页面上 ajax 的成功回调到底哪个先触发。
答案是不确定。
问题详情之前遇到一个现象，在父页面弹出一个Dialog加载一个子页面，在onload回调中传递一个参数给子页面，子页面异步ajax成功回调中要使用这个变量。
然而出现的情况是在ajax的成功回调中大多数情况下是取不到这个在onload传来的值，但是偶尔又是可以的。
查阅此Dialog源码，以上逻辑可以进行如下简化。
父页面：
子页面:
由于iframe的 onload 即要加载页面的 window.onload ，因此情况可以进一步简化为一个页面中到底是 window.onload 先触发还是 ajax 的成功回调先触发。
测试代码：
这个页面除了在测试的script之前引入了jQuery没有其他代码，应该毫无疑问，是 window.onload 先触发，之后才是 ajax 的成功结果。
结果也证明是 window.onload 先触发，上面代码在浏览器运行结果为：
// window onload
// Event {}
// ajax结果
// {}
MDN上关于 window.onload 有如下解释：
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
那么问题就来了，如果必然是 window.onload 先触发，那么是不可能出现最开始的问题的。
伪解释继续修改测试代码，再加上一些东西：
写入一个一分钟的循环后，结果发生了改变：
// ajax结果
// {}
// window onload
// Event {}
这么来看就奇怪了呀， ajax 的成功比 window.onload 先触发。
关于这个现象，我也没找到权威的解释。
自己给了一个“合理”的解析：
window.onload 会在当前任务队列的最后一个触发。如最开始的例子，ajax 异步，尚未给出结果，页面需要等待的所有内容已经完成，任务队列为空，因此 window.onload 触发。
而后面这个由于 ajax 后面还有很长的代码要执行，这段代码推迟了 onload 的触发，同时这段代码还未执行完成时，之前异步的ajax已经返回了结果，成功回调的代码已经被加到了任务队列，因此 ajax 回调执行后才触发 window.onload。
再验证为了进一步验证我上面的想法，那么只要保证页面资源执行完成时，ajax还没有解决即可。
因此还是上面的代码，但是将请求的内容换成一个真实接口，这个真实接口返回的数据更晚即可。
使用php暂停120s再返回结果，代码如下：
结果却是如上面估计的一样：
// window onload
// Event {}
// ajax结果
// {"response":"two minutes later."}
可以说明之前的“合理”解释确实是合理的。
所以异步的 ajax 和 window.onload 到底哪个会先触发是不确定，和你js代码（或者其他onload要等待的资源，如一个图片加载很慢等）以及这个 ajax 的解决时间有关系。
因此这种情况下的传值就不能以这种方式进行，可以换成更稳妥的方式，如直接跨页面操作或者放在url进行传递。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90277.html
摘要：浅灰色呈现该提示会在输入字段为空时显示，并会在字段获得焦点时消失。在常规的代码中，通常使用方法，而在中，使用的是方法。方法是事件模块中最重要一个函数，可以极大的提高应用程序的速度。 1.将多个同类元素分行，每一行有两个或者多个元素，可用li标签实现此 身高 ...
摘要：在元素一篇介绍过，可以使用来使得代码在加载完毕后自动执行代码，接下来具体介绍下这个机制。这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为属性只能保存对一个函数的引用，如果我们写成以下形式最后代码执行后的效果是会覆盖。 在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这...
摘要：简介最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。此状态为树构建完成后触发，和一样，但在其之后触发兼容性以上可用方法当浏览器窗口，文档或其资源将要卸载时，会触发事件。没有赋值时，该事件不做任何响应。 简介 最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。先来一段Html，作为我们研究的基础吧。 ...
摘要：简介最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。此状态为树构建完成后触发，和一样，但在其之后触发兼容性以上可用方法当浏览器窗口，文档或其资源将要卸载时，会触发事件。没有赋值时，该事件不做任何响应。 简介 最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。先来一段Html，作为我们研究的基础吧。 ...
阅读 711·2021-11-23 09:51
阅读 886·2021-11-15 17:57
阅读 1491·2021-09-22 15:24
阅读 682·2021-09-07 09:59
阅读 2090·2019-08-29 15:10
阅读 1726·2019-08-29 12:47
阅读 646·2019-08-29 12:30
阅读 3260·2019-08-26 13:51
