浅谈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操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
event.srcElement+表格应用
2006/08/29 Javascript
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js实现选项卡效果
2020/03/07 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
杭州-DOTNET笔试题集
2013/09/25 面试题
员工培训心得体会
2013/12/30 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
大学生社团活动总结
2014/04/26 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
车队安全员岗位职责
2015/02/15 职场文书