浅谈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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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/02 无线电
php知道与问问的采集插件代码
2010/10/12 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
检讨书范文300字
2015/01/28 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书