淺談js在html中的載入執行順序,多個jquery ready執行順序-js教程-PHP中文網

首頁

web前端

js教程

淺談js在html中的載入執行順序,多個jquery ready執行順序

高洛峰

Dec 05, 2016 am 10:38 AM

jQuery $(document).ready()執行順序：

當頁面DOM 元素全部載入完畢後就執行.ready()。 $(document).ready()是DOM結構繪製完畢後才執行，不必等到載入完畢。

如果在.ready()執行之前有javascript程式碼存在，那麼javascript將怎麼執行呢？

答案是先執行.ready()之前的javascript程式碼，然後執行.ready()。

多個$(document).ready()的執行順序並非單純的順序執行，其與巢狀層級也有一定的關係。

--------------------js載入執行順序-----------------------

1.載入順序：引入標記<script></script>的出現順序，

頁面上的Javascript程式碼是HTML文件的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記<script></script>的出現順序， <script></script>標記裡面的或透過src引入的外部JS，都是依照其語句出現的順序執行，而且執行過程是文件裝載的一部份。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题 3</title> 
<script>
  alert("1-最先执行"); 
</script> 
</head> 
<body onload="alert(&#39;3-最后执行&#39;);"> 
<script>
  alert("2-接着执行"); 
</script> 
</body> 
</html>

登入後複製

2、每個腳本定義的全域變數和函數，都可以被後面執行的腳本所呼叫。

變數的調用，必須是前面已經聲明，否則獲取的變數值是undefined。

<script type="text/javscrpt">//<![CDATA[
 alert(tmp);
 //输出 undefined　var
 tmp = 1;
 alert(tmp); //输出 1//]]>
</script>

登入後複製

3.同一段腳本，函數定義可以出現在函數呼叫的後面，但是如果是分別在兩段程式碼，且函數呼叫在第一段程式碼中，則會報函數未定義錯誤。

<script type="text/javscrpt">//<![CDATA[
 aa();      //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
 aa();  //输出 1
 function aa()
 {
  alert(1);
 }//]]>
</script>

登入後複製

4.document.write()會把輸出寫入到腳本文件所在的位置，瀏覽器解析完documemt.write()所在文件內容後，繼續解析document.write()輸出的內容，
然後在繼續解析HTML文件。

<script type="text/javascript">//<![CDATA[ 
 document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
 document.write(&#39;<script type="text/javascript">&#39;); 
 document.write(&#39;alert(2);&#39;) 
 document.write(&#39;alert("我是" + tmpStr);&#39;); 
 document.write(&#39;<//script>&#39;);  //]]>
</script>
 
<script type="text/javascript">//<![CDATA[ 
 alert(3);  //]]>
</script> test.js的内容是：
var tmpStr = 1; 
alert(tmpStr);

登入後複製

在Firefox和Opera中的彈出值的順序是：1、2、我是1、3

在IE中彈出值的順序是：2、1、3，同時瀏覽器報錯誤： tmpStr未定義

原因可能是IE在document.write時，並未等待載入SRC中的Javascript程式碼完畢後，才執行下一行，所以導致2先彈出，

並且執行到document.write('document. write("我是" + tmpStr)')呼叫tmpStr時，tmpStr並未定義，從而報錯。

解決這個問題，可以利用HTML解析是解析完一個HTML標籤，再執行下一個的原理，把程式碼拆分來實現：

<script type="text/javascript">//<![CDATA[
  document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
    //]]>
</script>
<script type="text/javascript">//<![CDATA[ 
  document.write(&#39;<script type="text/javascript">&#39;); 
  document.write(&#39;alert(2);&#39;)
  document.write(&#39;alert("我是" + tmpStr);&#39;); 
  document.write(&#39;<//script>&#39;); 
  //]]>
</script>
  
 <script type="text/javascript">//<![CDATA[ 
  alert(3); 
  //]]>
</script>

登入後複製

這樣IE下和其他瀏覽器輸出值的順序都是一直的了：1、2、我是1、3

總結：ＩＥ下，用Document.Write方法引用js檔案時，js檔案會出現尚未載入就直接呼叫的情況，因此建議將引用的JS文件單獨放在一個script區塊。以確保引用的js檔案完全載入後，再繼續執行後面的Document.Write內容

5、同名ＪＳ函數執行順序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
 
  function aa() {
    alert(&#39;First aa&#39;)
  } 
</script> 
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
 
<br />
<input id="Button1" type="button" value="button" onclick="aa();"/>
  </form>
</body>
<script type="text/javascript">
  function aa(s) {
    alert(&#39;Second aa&#39;);
  }
  function aa(s) {
    alert(&#39;Last aa&#39;);
  }
</script>
</html>

登入後複製

同名函數後，你在web頁面呼叫改js函數後，總是呼叫頁面中最後一個載入的函數。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7859

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。