浅谈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技巧总结
Jan 01 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
关于vue-router的那些事儿
May 23 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
详解Python中with语句的用法
2015/04/15 Python
Python常用小技巧总结
2015/06/01 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python celery原理及运行流程解析
2020/06/13 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
第二课堂活动总结
2014/05/07 职场文书
旷工检讨书1000字
2015/01/01 职场文书
anaconda python3.8安装后降级
2021/06/11 Python