快捷導(dǎo)航

淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序

更新時(shí)間：2016年11月26日 10:51:23 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

當(dāng)頁面DOM 元素全部加載完畢后就執(zhí)行.ready()。$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

如果在.ready()執(zhí)行之前有javascript代碼存在，那么javascript將怎么執(zhí)行呢？

答案是先執(zhí)行.ready()之前的javascript代碼，然后執(zhí)行.ready()。

多個(gè)$(document).ready()的執(zhí)行順序并非單純的順序執(zhí)行，其與嵌套層級(jí)也有一定的關(guān)系。

--------------------js加載執(zhí)行順序-----------------------

1.加載順序：引入標(biāo)記<script />的出現(xiàn)順序，

頁面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁面裝載時(shí)執(zhí)行的順序就是其引入標(biāo)記<script />的出現(xiàn)順序， <script />標(biāo)記里面的或者通過src引入的外部JS，都是按照其語句出現(xiàn)的順序執(zhí)行，而且執(zhí)行過程是文檔裝載的一部分。

<!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>無標(biāo)題 3</title> 
<script>
  alert("1-最先執(zhí)行"); 
</script> 
</head> 
<body onload="alert('3-最后執(zhí)行');"> 
<script>
  alert("2-接著執(zhí)行"); 
</script> 
</body> 
</html>

2、每個(gè)腳本定義的全局變量和函數(shù)，都可以被后面執(zhí)行的腳本所調(diào)用。

變量的調(diào)用，必須是前面已經(jīng)聲明，否則獲取的變量值是undefined。

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

3.同一段腳本，函數(shù)定義可以出現(xiàn)在函數(shù)調(diào)用的后面，但是如果是分別在兩段代碼，且函數(shù)調(diào)用在第一段代碼中，則會(huì)報(bào)函數(shù)未定義錯(cuò)誤。

<script type="text/javscrpt">//<![CDATA[
 aa();      //瀏覽器報(bào)錯(cuò)//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
 aa();  //輸出 1 
 function aa()
 {
  alert(1);
 }//]]>
</script>

4.document.write()會(huì)把輸出寫入到腳本文檔所在的位置，瀏覽器解析完documemt.write()所在文檔內(nèi)容后，繼續(xù)解析document.write()輸出的內(nèi)容，
然后在繼續(xù)解析HTML文檔。

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

<script type="text/javascript">//<![CDATA[  
 alert(3);  //]]>
</script> test.js的內(nèi)容是： 
var tmpStr = 1;  
alert(tmpStr);

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

在IE中彈出值的順序是：2、1、3，同時(shí)瀏覽器報(bào)錯(cuò)：tmpStr未定義

原因可能是IE在document.write時(shí)，并未等待加載SRC中的Javascript代碼完畢后，才執(zhí)行下一行，所以導(dǎo)致2先彈出，

并且執(zhí)行到document.write('document.write("我是" + tmpStr)')調(diào)用tmpStr時(shí)，tmpStr并未定義，從而報(bào)錯(cuò)。

解決這個(gè)問題，可以利用HTML解析是解析完一個(gè)HTML標(biāo)簽，再執(zhí)行下一個(gè)的原理，把代碼拆分來實(shí)現(xiàn)：

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

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

總結(jié)：ＩＥ下，用Document.Write方法引用js文件時(shí)，js文件會(huì)出現(xiàn)尚未加載就直接調(diào)用的情況，因此建議將引用的JS文件單獨(dú)放在一個(gè)script塊中。以確保引用的js文件完全加載后，再繼續(xù)執(zhí)行后面的Document.Write內(nèi)容

5、同名ＪＳ函數(shù)執(zhí)行順序

<!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('First aa')
  }  
</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('Second aa');
  }
  function aa(s) {
    alert('Last aa');
  }
</script>
</html>

點(diǎn)擊“botton”執(zhí)行結(jié)果：　Ｌast aa

在js里出現(xiàn)同名函數(shù)后，你在web頁面里調(diào)用改js函數(shù)后，總是調(diào)用頁面中最后一個(gè)加載的函數(shù)。

以上這篇淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: