浅谈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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
五句话帮你轻松搞定js原型链
Dec 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
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
国家助学金获奖感言
2014/01/31 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
公司总经理任命书
2014/06/05 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电