如何确保JavaScript的执行顺序之实战篇_javascript技巧-js教程-PHP中文网

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）
首先我们分析下在标签中顺序引入JavaScript的情况。test1.htm的页面源代码如下：

复制代码代码如下:

我们分别在各种浏览器中测试这个例子：
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的页面源代码如下：

复制代码代码如下:

我们分别在各种浏览器中测试这个例子：
test3.htm
通过JavaScript添加<script>标签 <table style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; MARGIN-LEFT: 10.5pt; BORDER-LEFT: medium none; WIDTH: 413.1pt; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse" cellspacing="0" cellpadding="0" width="689" border="1"> <tbody> <tr> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112"> Firefox 3.6 </td> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576"> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231405311.gif" style="max-width:90%" border="0"> </td> </tr> <tr> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112"> IE 8 </td> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576"> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407246.gif" style="max-width:90%" border="0"> </td> </tr> <tr> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112"> Chrome 10 </td> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576"> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407150.gif" style="max-width:90%" border="0"> </td> </tr> <tr> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112"> Safari 4 </td> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576"> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407465.jpg" style="max-width:90%" border="0"> </td> </tr> <tr> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112"> Opera 11 </td> <td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576"> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231406793.gif" style="max-width:90%" border="0"> </td> </tr> </tbody> </table> 可见，通过JavaScript在DOM加载完毕后再引入外部或者内联JavaScript时，Firefox和Opera的行为一致，能够确保JavaScript的执行顺序和引入顺序一致。但是IE8, Chrome, Safari 却不能保证这个执行顺序。 虽然各种浏览器在确保执行顺序方面不尽相同，不过这时的最大好处是多个JavaScript文件能够并行下载，这在所有浏览器中行为一致。当然这不是这篇文章的主题，可以<a href="http://www.google.com/search?q=javascript%20parallel%20download">Google更多细节</a>。 如何解决各个浏览器的不一致性，下面提供了两个解决方案： 4. 方案一，如何在动态添加script标签时确保执行顺序 有时页面逻辑要求我们必须通过上面的方式动态执行JavaScript，那么如何确保所有浏览器下的执行顺序（目前只有Firefox和Opera确保执行顺序）。 其实解决方案很简单，我们为函数执行添加一个complete的回调函数就行了。下面的test4.htm给出了具体的解决方案： <div class="codetitle"> <a style="CURSOR: pointer" data="768" class="copybut" id="copybut768" onclick="doCopy('code768')">复制代码</a> 代码如下:</div> <div class="codebody" id="code768"> <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>

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

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