浅谈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 相关文章推荐
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python 加密的实例详解
2017/10/09 Python
Python 错误和异常代码详解
2018/01/29 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
python 实现逻辑回归
2020/12/30 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
专业实习自我鉴定
2013/10/29 职场文书
环保倡议书格式范文
2014/05/14 职场文书
优秀语文教师事迹
2014/05/18 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS