如何确保JavaScript的执行顺序之实战篇

更新时间：2011年03月03日 22:53:12 作者：

我曾在文章《如何在多个页面使用同一个HTML片段 - 续》的最后提到JavaScript顺序执行的特性。虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。

1. 引言
我曾在文章《如何在多个页面使用同一个HTML片段 - 续》的最后提到JavaScript顺序执行的特性。虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。
为了更好的测试这个过程，我写了一个简单的HTTP处理程序页面 service.ashx，它可以接受两个参数：
1. file，需要返回文件的服务器端路径。
2. delay，延迟一定时间后再返回本次HTTP请求（毫秒）。
一个典型的页面比如：./service.ashx?file=js/jquery-ui.js&delay=2000，表示延迟2秒钟后再返回服务器端的js/jquery-ui.js文件。
service.ashx 的关键代码如下：

复制代码代码如下:

 
public void ProcessRequest(HttpContext context) 
{ 
int delay = 0; 
if (!String.IsNullOrEmpty(context.Request["delay"])) 
{ 
delay = Convert.ToInt32(context.Request["delay"]); 
} 
if (delay > 0) 
{ 
System.Threading.Thread.Sleep(1000); 
} 
string filePath = context.Request["file"].ToString(); 
string fileContent = String.Empty; 
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath))) 
{ 
fileContent = sr.ReadToEnd(); 
} 
if (filePath.EndsWith(".js")) 
{ 
context.Response.ContentType = "application/x-javascript"; 
} 
else 
{ 
context.Response.ContentType = "text/plain"; 
} 
context.Response.Write(fileContent); 
} 

2. 通过script标签直接引入JavaScript（test1.htm）
首先我们分析下在<head>标签中顺序引入JavaScript的情况。test1.htm的页面源代码如下：

复制代码代码如下:

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" 
type="text/javascript"></script> 
<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" 
type="text/javascript"></script> 
<script> 
alert(typeof (jQuery.ui)); 
</script> 
</head> 
<body> 
</body> 
</html> 

我们分别在各种浏览器中测试这个例子：
test1.htm
通过script标签直接引入JavaScript

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

可以看出各个主流浏览器的行为一致。虽然jQueryUI在服务器延迟了2秒钟再返回，但是后引入的内联JavaScript还是等待了2秒，等前面引入的JavaScript执行完毕才执行。这也是著名的JavaScript顺序执行的特性。
3. 通过JavaScript添加script标签（test3.htm）
我们首先定义一个addScript函数，用来引入外部或者内联JavaScript。test3.htm的页面源代码如下：

复制代码代码如下:

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
function addScript(url, inline) { 
var head = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if (inline) { 
script.text = url; 
} else { 
script.src = url; 
} 
head.appendChild(script); 
} 
$(function () { 
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000'); 
addScript('alert(typeof(jQuery.ui));', true); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

我们分别在各种浏览器中测试这个例子：
test3.htm
通过JavaScript添加<script>标签

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

可见，通过JavaScript在DOM加载完毕后再引入外部或者内联JavaScript时，Firefox和Opera的行为一致，能够确保JavaScript的执行顺序和引入顺序一致。但是IE8, Chrome, Safari 却不能保证这个执行顺序。

虽然各种浏览器在确保执行顺序方面不尽相同，不过这时的最大好处是多个JavaScript文件能够并行下载，这在所有浏览器中行为一致。当然这不是这篇文章的主题，可以Google更多细节。

如何解决各个浏览器的不一致性，下面提供了两个解决方案：
4. 方案一，如何在动态添加script标签时确保执行顺序
有时页面逻辑要求我们必须通过上面的方式动态执行JavaScript，那么如何确保所有浏览器下的执行顺序（目前只有Firefox和Opera确保执行顺序）。
其实解决方案很简单，我们为函数执行添加一个complete的回调函数就行了。下面的test4.htm给出了具体的解决方案：

复制代码代码如下:

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
function addScript(url, inline, callback) { 
var head = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if (inline) { 
script.text = url; 
} else { 
script.src = url; 
script.onload = script.onreadystatechange = function () { 
if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') { 
if (callback) { 
callback(); 
} 
script.onload = script.onreadystatechange = null; 
}; 
}; 
} 
head.appendChild(script); 
if (inline && callback) { 
callback(); 
} 
} 
$(function () { 
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000', false, function () { 
addScript('alert(typeof(jQuery.ui));', true); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

此时所有浏览器中的行为一致：
test4.htm
通过回调函数解决动态添加JavaScript的顺序问题

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

5. 方案二，使用jQuery的html函数动态添加JavaScript
jQuery的html函数用来更新一个DOM片段，我们可以很方便的通过这个函数来动态加载JavaScript，请看示例test2.htm：

复制代码代码如下:

 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
$(function(){ 
$('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>'); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

此时，各个浏览器中的行为一致：
test2.htm
通过jQuery的html函数解决动态添加JavaScript的顺序问题

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

6. 后记
为什么jQuery的html函数能够确保动态加载JavaScript的执行顺序呢？
我们知道通过简单的 .innerHTML 更新DOM节点，是不会让其中的JavaScript的执行，我们可以简单的把这个例子的源代码改成：
$('#container')[0].innerHTML = '<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>';
这种情况下jQueryUI根本不会加载。
那么jQuery是如果做到的呢？下篇文章我们会追根溯源，详细分析jQuery源代码，请继续浏览：如何确保JavaScript的执行顺序 – 之jQuery.html深度分析

您可能感兴趣的文章:

js实现二代身份证号码验证详解
本文给大家分享一段超级全面的二代身份证号码验证程序，由JS编写而成，可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
2014-11-11
RxJS中四种Subject的用法和区别
RxJS中有四种不同类型的Subject，它们分别是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文将介绍这四种Subject的用法、区别以及适用的应用场景，并提供代码示例,需要的朋友可以参考下
2023-07-07
JavaScript实现文本中间缩略的两种方案
项目中经常会遇到缩略展示文字的场景,即要求文字在一行不换行展示,超出自动展示...,常用的展示效果有两种,文字中间缩略以及文字末尾缩略,本文将通过代码示例给大家详细的讲一下这两种方案,需要的朋友可以参考下
2024-06-06
echarts折线图流动特效的实现全过程(非平滑曲线)
最近因为公司业务需求,需要实现,当Echarts重新加载数据时实现动态效果,下面这篇文章主要给大家介绍了关于echarts折线图流动特效实现的相关资料,需要的朋友可以参考下
2023-03-03
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
这篇文章主要介绍了Bootstrap导航栏各元素操作方法，针对表单、按钮、文本进行操作，感兴趣的小伙伴们可以参考一下
2015-12-12
javascript对下拉列表框(select)的操作实例讲解
这篇文章主要介绍了javascript对下拉列表框(select)的操作。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
微信小程序中子页面向父页面传值实例详解
这篇文章主要介绍了微信小程序中子页面向父页面传值实例详解的相关资料,需要的朋友可以参考下
2017-03-03
Bootstrap 填充Json数据的实例代码
本篇文章主要介绍了Bootstrap 填充Json数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
js中常用的4种模糊查询详解(includes()、indexOf()、search()、match())
这篇文章主要给大家介绍了关于js中常用的4种模糊查询(includes()、indexOf()、search()、match())的相关资料,搜索可以使我们更快的找到某一个关键词或者某一个商品,所以模糊查询和下拉匹配也成了前端必备的一个小技能,需要的朋友可以参考下
2023-11-11
js验证真实姓名与身份证号是否匹配
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下
2015-10-10