浅谈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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 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 JSON 数据解析代码
2010/05/26 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
如何使用php输出时间格式
2013/08/31 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
Javascript基础教程之变量
2015/01/18 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
基于Pytorch SSD模型分析
2020/02/18 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
全民健身日活动方案
2014/01/29 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
开业庆典致辞
2015/08/01 职场文书
python 破解加密zip文件的密码
2021/04/22 Python