浅谈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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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反弹shell实现代码
2009/04/22 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python在文本开头插入一行的实例
2018/05/02 Python
python实现祝福弹窗效果
2019/04/07 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
PyTorch中的C++扩展实现
2020/04/02 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
求职推荐信
2013/10/28 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
党支部综合考察材料
2014/05/19 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
商铺租房协议书范本
2014/12/04 职场文书
财务总监岗位职责
2015/02/03 职场文书
庭外和解协议书
2016/03/23 职场文书