資訊專欄INFORMATION COLUMN
摘要：本文關鍵點和頁面上的成功回調到底哪個先觸發。自己給了一個合理的解析會在當前任務隊列的最后一個觸發。如最開始的例子，異步，尚未給出結果，頁面需要等待的所有內容已經完成，任務隊列為空，因此觸發。
本文首發我的博客 - 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進行傳遞。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90277.html
摘要：淺灰色呈現該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。在常規的代碼中，通常使用方法，而在中，使用的是方法。方法是事件模塊中最重要一個函數，可以極大的提高應用程序的速度。 1.將多個同類元素分行，每一行有兩個或者多個元素，可用li標簽實現此 身高 ...
摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為屬性只能保存對一個函數的引用，如果我們寫成以下形式最后代碼執行后的效果是會覆蓋。 在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這...
摘要：簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。此狀態為樹構建完成后觸發，和一樣，但在其之后觸發兼容性以上可用方法當瀏覽器窗口，文檔或其資源將要卸載時，會觸發事件。沒有賦值時，該事件不做任何響應。 簡介 最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。先來一段Html，作為我們研究的基礎吧。 ...
摘要：簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。此狀態為樹構建完成后觸發，和一樣，但在其之后觸發兼容性以上可用方法當瀏覽器窗口，文檔或其資源將要卸載時，會觸發事件。沒有賦值時，該事件不做任何響應。 簡介 最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。先來一段Html，作為我們研究的基礎吧。 ...
閱讀 882·2021-11-23 09:51
閱讀 1089·2021-11-15 17:57
閱讀 1667·2021-09-22 15:24
閱讀 812·2021-09-07 09:59
閱讀 2221·2019-08-29 15:10
閱讀 1849·2019-08-29 12:47
閱讀 751·2019-08-29 12:30
閱讀 3369·2019-08-26 13:51
