Re: [問題] jquery ready

[ducksteven (鴨七‧林新)]

※ 引述《a613204 (胖胖)》之銘言：
: 大家好 想請問一下ready事件
: 如果我在html檔案裡面有嵌入<script>alert('1')</script>
: 然後有嵌入外部js
: 外部js的內容為
: $(function(){
:         alert('2');
: })
: 出現的順序會是1 接著是2
: 在這邊想確定一下 jquery的ready事件會等html裡面內嵌的script執行完畢才會去跑嗎?
: 謝謝

→ a613204:但是如果我把內嵌的script寫在</html>之後
不要這樣做，請放在 body 裡面。

→ a613204:內嵌的還是會先比ready內的先執行耶
→ a613204:這個時候dom不是應該準備好了?
是這樣子：

<script>alert('1');</script><!-- (1) -->
<script src="remote.js"></script><!-- (2) -->

事實上 (1) 和 (2) 都執行了，而且當瀏覽器讀到 (1) 的時候
會先執行 (1) 裡面的程式，到你按下「確定」
才會繼續讀 (2) 。

讀到 (2) 的時候，瀏覽器會去下載 remote.js
然後執行以下的內容：

$(function() {
  alert('2');
});

這段程式的意思是，宣告一個 anonymous function，
叫 jQuery 把這個 function 註冊給 ready callback
當整個 HTML 都解讀成 DOM 之後，就會執行這個 function

所以瀏覽器已經執行了這段程式碼（宣告 function 、註冊 ready callback），
只是沒有執行 callback ，因為 $() callback 是 jQuery 管理的，
要到整個 HTML 讀完才會由 jQuery 執行裡面的 callback。

<script> 裡面的程式是同步執行的，瀏覽器解讀 HTML 的時候
會停下來執行裡面的程式，執行完了，再繼續讀後面的 HTML 。
這是因為有的 script 裡面會執行 document.write()
這會改變 HTML 的內容，要是同時執行 script 和讀 HTML
就會造成 HTML 的內容跟預期的不一樣。

除非你用 <script async src="remote.js"></script>
這樣瀏覽器才不會卡在這裡。當然你裡面不要用 document.write() 。

結論：

   兩段程式碼都已經被瀏覽器執行了，只是因為後者是註冊 callback ，
   而瀏覽器讀到那邊的當下， ready callback 還沒被觸發，所以不會執行。

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 219.71.240.146
推 a613204:感謝回答 我有個疑問是ready callback觸發的時機
→ a613204:假設我把<script>alert('1')</script>寫在</html>之後
→ a613204:那ready callback不是應該比<script>alert('1')</script>
→ a613204:要來的早執行 因為ready callback觸發的時機不是DOM載完嗎
→ minejel:那麼堅持非標準化做法喔orz
→ a613204:我沒有堅持這樣寫啊 我只是就我理解說出我認為會發生的
→ ducksteven:不會，因為</html>之後還有<script>
→ ducksteven:DOM ready 不是指讀到</html>而是整個html原始碼讀完
推 a613204:所以這樣說來~ 也就是會把<script></script>的內容跑完
→ a613204:ready callback才會觸發囉
→ ducksteven:對啊
→ a613204:感恩 我就是想問這個 因為我原本以為DOM指的只有html tag
推 s25g5d4:因為讀到Script會先執行script 此時DOM解析是停下來的
推 ptt10:有看有推！