浅谈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 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
JS canvas实现画板和签字板功能
Feb 23 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 操作文件的一些FAQ总结
2009/02/12 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
运动会入场式解说词
2014/02/18 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
网络营销策划方案
2014/06/04 职场文书
高二语文教学反思
2016/02/16 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
python中的被动信息搜集
2021/04/29 Python