浅谈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 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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+AJAX无刷新分页实现方法
2015/11/03 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
python通过文件头判断文件类型
2015/10/30 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
python opencv实现图像配准与比较
2021/02/09 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
电气专业推荐信范文
2013/11/18 职场文书
实习生个人的自我评价
2013/12/08 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server