浅谈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动画效果类封装代码
Aug 28 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery选择器基础入门教程
May 10 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP中strtotime函数使用方法分享
2012/01/10 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue中props的详解
2019/05/16 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
python遍历类中所有成员的方法
2015/03/18 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
幼儿园运动会加油词
2014/02/14 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015入党个人自传范文
2015/06/26 职场文书