快捷導(dǎo)航

javascript異步編程

更新時間：2010年06月07日 23:24:24 作者：

如果編程加入了時間的概念就一切變得非常復(fù)雜。通常我們的程序是飛快地解析執(zhí)行，一毫秒緊接著一毫秒，從上至下地執(zhí)行，這稱之為同步。但如果我們想讓后臺的程序不等前面的程序執(zhí)行，就執(zhí)行呢，于是就有了異步的概念。

就好像排隊，前面的人忙著忙著突然上廁所了，后面的人阻塞在這里，因此我們就需要讓前面的人死到一邊去，讓后面的人跟進……AJAX就是這個概念，請求還在繼續(xù)，但我們還可以做其他事。

javascript中實現(xiàn)這個功能的是來自BOM的一個函數(shù)setTimeout，但相關(guān)的DOM操作也提供了一系列實現(xiàn)。如XMLHttpRequest對象與script標簽的onreadystatechange回調(diào)，image的onload與onerror回調(diào)，iframe的onload，DOM元素的事件回調(diào)，HTML5的跨域消息傳送postMessage，QuickTime與flash對象的加載……

setTimeout的零秒延遲在前些年時間被國內(nèi)宣揚得特別厲害，但setTimeout是所有延遲中最慢的，最少要花上10多毫秒，如果用setTimeout來開發(fā)特效，這特效會運行得比較慢。下面是一個性能測試：

<!doctype html> <html lang="en"> <head> <title>Async performance test</title> <meta charset="gb2312"> <style> pre { background-color: #eeeeee; padding: 20px; } div.test { margin: 20px; padding: 10px; border: solid black 1px; } </style> </head> <body> <div   id="vvxyksv9kd"   class="test"> <h3>setTimeout (slow, takes about 10 sec)</h3> <pre class="source"> function async(callback) { setTimeout(callback, 0); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div   id="vvxyksv9kd"   class="test"> <h3>img.onerror (data:uri)</h3> <pre class="source"> function async(callback) { var img = new Image; img.addEventListener('error', callback, false); img.src = 'data:,foo'; } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div   id="vvxyksv9kd"   class="test"> <h3>script.onreadystatechange</h3> <pre class="source"> function async(callback) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "javascript:"; script.onreadystatechange = function () { document.body.removeChild(script); callback(); } document.body.appendChild(script); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div   id="vvxyksv9kd"   class="test"> <h3>script.onload (data:uri)</h3> <pre class="source"> function async(callback) { var script = document.createElement('script'); script.onload = function() { document.body.removeChild(script); callback(); } script.src = 'data:text/javascript,'; document.body.appendChild(script); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div   id="vvxyksv9kd"   class="test"> <h3>xhr.onreadystatechange (data:text/plain,foo)</h3> <pre class="source"> function async(callback) { var xhr = new XMLHttpRequest; xhr.open('GET','data:text/plain,foo',true); xhr.onreadystatechange = function() { xhr.onreadystatechange = null; callback(); }; xhr.send(null); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div   id="vvxyksv9kd"   class="test"> <h3>self.postMessage</h3> <pre class="source"> function async(callback) { var n = ++async.count; window.addEventListener('message',function(e){ if (e.data == n) { window.removeEventListener('message', arguments.callee,false); callback(); } },false); window.postMessage(n, location.protocol + "http://" + location.host); } async.count = 0; </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

	Chromium	Safari	Firefox	Opera 10.10	Opera 10.50
setTimeout	4.32ms	10.201ms	10.302ms	10.38ms	9.876ms
img.onerror	0.199ms	0.678ms	0.201ms	0.058ms	0.575ms
script.onreadystatechange	fail	fail	fail	fail	fail
script.onload	0.414ms	0.138ms	0.414ms	fail	fail
xhr.onreadystatechange	fail	0.622ms	fail	0.078ms	0.079ms
self.postMessage	0.096ms	0.123ms	0.112ms	0.049ms	0.094ms

為了處理這種異步調(diào)用，Mochikit從Python的Twisted框架借來了Deferred這個類，并用它來處理AJAX的回調(diào)。AJAX的回調(diào)通常有兩種，成功加載時的回調(diào)與請求失敗的回調(diào)，IE8的XDomainRequest就有這兩種回調(diào)了，標準瀏覽器的script與image也有這兩種回調(diào)，分別稱之為onload與onerror。Mochikit的Deferred實例就內(nèi)置一個數(shù)組，每次包含這兩種回調(diào)，依次執(zhí)行。Mochikit這偉大的遺產(chǎn)后來由dojo發(fā)揚光大了，至于怎么用，自己google吧。

下面是我的框架對它的應(yīng)用，我已把它整合到我的框架中：

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<title>異步操作例子 by 司徒正美</title> 
<meta charset="utf-8"/> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<meta name="keywords" content="異步操作例子 by 司徒正美" /> 
<meta name="description" content="異步操作例子 by 司徒正美" /> 
<%= javascript_include_tag "dom.js" %> 
<%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection %> 
<script type="text/javascript" charset="utf-8"> 
dom.ready(function(){ 
dom.require("ajax"); 
dom.ajax({method:"post", 
async:true, 
dataType:"text", 
data:{authenticity_token:window._token} 
}).next(function(a){ 
alert(a) 
}); 
dom.jsonp({url:"http://del.icio.us/feeds/json/fans/stomita"}).next(function(json){ 
alert(json) 
}).error(function(e){ 
alert(e) 
}); 
}); 
</script> 
</head> 
<body> 
</body> 
</html> 

后臺：

復(fù)制代碼代碼如下:

 
class HomeController < ApplicationController 
def index 
if request.xhr? 
name = params[:name] 
puts "-------------" 
render :text => "<p>The time is <b>" + DateTime.now.to_s + "</b></p>" 
end 
end 
end 

在日本一博客提到這樣一個捕捉異步錯誤的例子：

復(fù)制代碼代碼如下:

 
function throwError(){ 
throw new Error('ERROR'); 
} 
try{ 
setTimeout(throwError, 3000); 
} catch(e){ 
alert(e); 
} 

看來try...catch是無法捕捉這種形式的錯誤，window.onerror可以，但好像只有IE與FF支持。如果用Deferred來處理，就簡單了！

復(fù)制代碼代碼如下:

 
dom.Deferred.next(function () { 
throw new Error("錯誤") 
}).wait(1).error(function(e){ 
alert(e instanceof Error) 
}); 

列隊處理。由于是使用了異步，因此不會阻塞頁面的演染。

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<title>異步操作例子 by 司徒正美</title> 
<meta charset="utf-8"/> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<meta name="keywords" content="異步操作例子 by 司徒正美" /> 
<meta name="description" content="異步操作例子 by 司徒正美" /> 
<%= javascript_include_tag "dom.js" %> 
<script type="text/javascript" charset="utf-8"> 
dom.require("deferred"); 
dom.require("query"); 
dom.ready(function(){ 
var a = dom("#aaa")[0]; 
dom.Deferred.loop(10,function(i){ 
a.innerHTML += i+"<br/>" 
}); 
dom.Deferred.loop(10,function(i){ 
a.innerHTML += String.fromCharCode(i+97)+"<br/>" 
}); 
dom.Deferred.loop(10,function(i){ 
a.innerHTML += "司徒正美"+i+"<br/>" 
}); 
}); 
/*結(jié)果 
0 
a 
司徒正美0 
1 

司徒正美1 
2 
c 
司徒正美2 
3 
d 
司徒正美3 
4 
e 
司徒正美4 
5 
f 
司徒正美5 
6 
g 
司徒正美6 
7 
h 
司徒正美7 
8 
i 
司徒正美8 
9 
j 
司徒正美9 
*/ 
</script> 
</head> 
<body> 
<div id="aaa"></div> 
</body> 
</html> 