資訊專欄INFORMATION COLUMN
摘要：本文關(guān)鍵點(diǎn)和頁面上的成功回調(diào)到底哪個(gè)先觸發(fā)。自己給了一個(gè)合理的解析會(huì)在當(dāng)前任務(wù)隊(duì)列的最后一個(gè)觸發(fā)。如最開始的例子，異步，尚未給出結(jié)果，頁面需要等待的所有內(nèi)容已經(jīng)完成，任務(wù)隊(duì)列為空，因此觸發(fā)。
本文首發(fā)我的博客 - blog.cdswyda.com，轉(zhuǎn)載務(wù)必保留作者和出處，以便追溯和錯(cuò)誤修正。
本文關(guān)鍵點(diǎn): window.onload 和 頁面上 ajax 的成功回調(diào)到底哪個(gè)先觸發(fā)。
答案是不確定。
問題詳情之前遇到一個(gè)現(xiàn)象，在父頁面彈出一個(gè)Dialog加載一個(gè)子頁面，在onload回調(diào)中傳遞一個(gè)參數(shù)給子頁面，子頁面異步ajax成功回調(diào)中要使用這個(gè)變量。
然而出現(xiàn)的情況是在ajax的成功回調(diào)中大多數(shù)情況下是取不到這個(gè)在onload傳來的值，但是偶爾又是可以的。
查閱此Dialog源碼，以上邏輯可以進(jìn)行如下簡(jiǎn)化。
父頁面：
子頁面:
由于iframe的 onload 即要加載頁面的 window.onload ，因此情況可以進(jìn)一步簡(jiǎn)化為一個(gè)頁面中到底是 window.onload 先觸發(fā)還是 ajax 的成功回調(diào)先觸發(fā)。
測(cè)試代碼：
這個(gè)頁面除了在測(cè)試的script之前引入了jQuery沒有其他代碼，應(yīng)該毫無疑問，是 window.onload 先觸發(fā)，之后才是 ajax 的成功結(jié)果。
結(jié)果也證明是 window.onload 先觸發(fā)，上面代碼在瀏覽器運(yùn)行結(jié)果為：
// window onload
// Event {}
// ajax結(jié)果
// {}
MDN上關(guān)于 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 先觸發(fā)，那么是不可能出現(xiàn)最開始的問題的。
偽解釋繼續(xù)修改測(cè)試代碼，再加上一些東西：
寫入一個(gè)一分鐘的循環(huán)后，結(jié)果發(fā)生了改變：
// ajax結(jié)果
// {}
// window onload
// Event {}
這么來看就奇怪了呀， ajax 的成功比 window.onload 先觸發(fā)。
關(guān)于這個(gè)現(xiàn)象，我也沒找到權(quán)威的解釋。
自己給了一個(gè)“合理”的解析：
window.onload 會(huì)在當(dāng)前任務(wù)隊(duì)列的最后一個(gè)觸發(fā)。如最開始的例子，ajax 異步，尚未給出結(jié)果，頁面需要等待的所有內(nèi)容已經(jīng)完成，任務(wù)隊(duì)列為空，因此 window.onload 觸發(fā)。
而后面這個(gè)由于 ajax 后面還有很長(zhǎng)的代碼要執(zhí)行，這段代碼推遲了 onload 的觸發(fā)，同時(shí)這段代碼還未執(zhí)行完成時(shí)，之前異步的ajax已經(jīng)返回了結(jié)果，成功回調(diào)的代碼已經(jīng)被加到了任務(wù)隊(duì)列，因此 ajax 回調(diào)執(zhí)行后才觸發(fā) window.onload。
再驗(yàn)證為了進(jìn)一步驗(yàn)證我上面的想法，那么只要保證頁面資源執(zhí)行完成時(shí)，ajax還沒有解決即可。
因此還是上面的代碼，但是將請(qǐng)求的內(nèi)容換成一個(gè)真實(shí)接口，這個(gè)真實(shí)接口返回的數(shù)據(jù)更晚即可。
使用php暫停120s再返回結(jié)果，代碼如下：
結(jié)果卻是如上面估計(jì)的一樣：
// window onload
// Event {}
// ajax結(jié)果
// {"response":"two minutes later."}
可以說明之前的“合理”解釋確實(shí)是合理的。
所以異步的 ajax 和 window.onload 到底哪個(gè)會(huì)先觸發(fā)是不確定，和你js代碼（或者其他onload要等待的資源，如一個(gè)圖片加載很慢等）以及這個(gè) ajax 的解決時(shí)間有關(guān)系。
因此這種情況下的傳值就不能以這種方式進(jìn)行，可以換成更穩(wěn)妥的方式，如直接跨頁面操作或者放在url進(jìn)行傳遞。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90277.html
摘要：淺灰色呈現(xiàn)該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。在常規(guī)的代碼中，通常使用方法，而在中，使用的是方法。方法是事件模塊中最重要一個(gè)函數(shù)，可以極大的提高應(yīng)用程序的速度。 1.將多個(gè)同類元素分行，每一行有兩個(gè)或者多個(gè)元素，可用li標(biāo)簽實(shí)現(xiàn)此 身高 ...
摘要：淺灰色呈現(xiàn)該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。在常規(guī)的代碼中，通常使用方法，而在中，使用的是方法。方法是事件模塊中最重要一個(gè)函數(shù)，可以極大的提高應(yīng)用程序的速度。 1.將多個(gè)同類元素分行，每一行有兩個(gè)或者多個(gè)元素，可用li標(biāo)簽實(shí)現(xiàn)此 身高 ...
摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動(dòng)執(zhí)行代碼，接下來具體介紹下這個(gè)機(jī)制。這樣看上去貌似沒什么問題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)閷傩灾荒鼙４鎸?duì)一個(gè)函數(shù)的引用，如果我們寫成以下形式最后代碼執(zhí)行后的效果是會(huì)覆蓋。 在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動(dòng)執(zhí)行代碼，接下來具體介紹下這...
摘要：簡(jiǎn)介最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。此狀態(tài)為樹構(gòu)建完成后觸發(fā)，和一樣，但在其之后觸發(fā)兼容性以上可用方法當(dāng)瀏覽器窗口，文檔或其資源將要卸載時(shí)，會(huì)觸發(fā)事件。沒有賦值時(shí)，該事件不做任何響應(yīng)。 簡(jiǎn)介 最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。先來一段Html，作為我們研究的基礎(chǔ)吧。 ...
摘要：簡(jiǎn)介最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。此狀態(tài)為樹構(gòu)建完成后觸發(fā)，和一樣，但在其之后觸發(fā)兼容性以上可用方法當(dāng)瀏覽器窗口，文檔或其資源將要卸載時(shí)，會(huì)觸發(fā)事件。沒有賦值時(shí)，該事件不做任何響應(yīng)。 簡(jiǎn)介 最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。先來一段Html，作為我們研究的基礎(chǔ)吧。 ...
閱讀 893·2021-11-23 09:51
閱讀 1107·2021-11-15 17:57
閱讀 1674·2021-09-22 15:24
閱讀 820·2021-09-07 09:59
閱讀 2234·2019-08-29 15:10
閱讀 1857·2019-08-29 12:47
閱讀 760·2019-08-29 12:30
閱讀 3381·2019-08-26 13:51
