浅谈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 相关文章推荐
JS实现一键回顶功能示例代码
Oct 28 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Vuex提升学习篇
2018/01/11 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python  连接字符串(join %)
2008/09/06 Python
学习python的几条建议分享
2013/02/10 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python同步两个文件夹下的内容
2019/08/29 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
如何提高JDBC的性能
2013/04/30 面试题
枚举与#define宏的区别
2014/04/30 面试题
学校宣传标语
2014/06/18 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技