浅谈js在html中的加载执行顺序,多个jquery ready执行顺序


Posted in Javascript onNovember 26, 2016

jQuery $(document).ready()执行顺序:

当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢?

答案是先执行.ready()之前的javascript代码,然后执行.ready()。

多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系。

--------------------js加载执行顺序-----------------------

1.加载顺序:引入标记<script />的出现顺序,

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<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('3-最后执行');"> 
<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('<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的内容是: 
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('<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

总结:IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容
 
5、同名JS函数执行顺序

<!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>

点击“botton”执行结果: Last aa

在js里出现同名函数后,你在web页面里调用改js函数后,总是调用页面中最后一个加载的函数。

以上这篇浅谈js在html中的加载执行顺序,多个jquery ready执行顺序就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
JS匿名函数实例分析
Nov 26 #Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 #Javascript
JS类的定义与使用方法深入探索
Nov 26 #Javascript
js控制台输出的方法(详解)
Nov 26 #Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 #Javascript
node.js中的事件处理机制详解
Nov 26 #Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 #Javascript
You might like
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python ATM功能实现代码实例
2020/03/19 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
大学毕业生求职自荐信
2014/02/20 职场文书
中学生英语演讲稿
2014/04/26 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2015年双拥工作总结
2015/04/08 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Mysql数据库命令大全
2021/05/26 MySQL
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
windows系统安装配置nginx环境
2022/06/28 Servers