浅谈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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vue调用语音播放的方法
Sep 27 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
js实现二级联动简单实例
Jan 11 Javascript
序列化模块json代码实例详解
Mar 03 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
详解vue axios二次封装
2018/07/22 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python实现两个文件夹的同步
2019/08/29 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
中学教师实习自我鉴定
2013/09/28 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
消防安全标语
2014/06/07 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
高三语文复习计划
2015/01/19 职场文书
2016国培学习心得体会
2016/01/08 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
MySQL池化框架学习接池自定义
2022/07/23 MySQL