首頁 > 開發者 > JavaScript
這可能是個比較深的話題。何謂非同步？
籠統地說，非同步在javascript就是延時執行。嚴格來說，javascript中的非同步編程能力都是由BOM與DOM提供的，如setTimeout，XMLHttpRequest，還有DOM的事件機制，還有HTML5新增加的webwork, postMessage，等等很多。這些東西都有一個共同的特點，就是擁有一個回呼函數，實現控制反轉。由於控制反轉是更深奧的問題，這裡不想展開。不過有點可以確認的，回呼函數的存在打斷了原來的執行流程，讓它們自行在適當的時機出現並執行，這是個非常便捷的模式。對比主動式的輪詢，你就知它多麼節能。在同步編程，代碼基本上自上向下執行，在非同步編程，一些代碼就要寫到回呼函數中，如果代碼之間存在依賴，回呼函數套回呼函數的情況也不少見，這種套嵌結構對以後的維護來說簡直是地獄。還有一種我們不得不面對的情況，try...catch無法捕捉幾毫秒之後發生的異常。另外，除了setTimeout外，非同步編程基本上由事件機制承擔的，它們的回呼函數什麼時候發生基本上都是未知數，可能由於後台發生系統級錯誤，無法再發出響應，或者，系統忙碌，一時半刻響應不過來，這兩種情況我們也必需提供一個策略，中斷這操作，也就是所謂的abort，這些都是非同步編程的所要處理的課題。
$.post("/foo.json", function (dataOfFoo) {//多層套嵌結構的Ajax回調
$.post("/bar.json", function (dataOfBar) {
$.post("/baz.json", function (dataOfBaz) {
alert([dataOfFoo, dataOfBar, dataOfBaz]);
});
});
});
function throwError(){
throw new Error(ERROR);
}
try{
setTimeout(throwError, 3000);
} catch(e){
alert(e);//這裡的異常無法捕獲
}
由於在javascript編程，隨時都碰到這樣的需求，因此實現相關輕捷的API是重中之重。正如上面所說，它只少要有以下功能，能儲存一組回呼函數（domReary,多投事件，特效），在特定時刻中執行所有回呼函數，如果發生錯誤能觸發相應的處理函數（負向回調），能中止整個操作，從中斷處再起操作，如果要求更多，我們還想能從串列轉向並行，由並行轉入串列。可能有許多概念大家聽不懂，是不是？但想弄個好的特效，這些都是必需的。如果玩過後端JS的人，一定聽說過node.js，現在基本成為它的代名詞了。路由派發，IO操作，都是非同步，事件驅動的，為了實現優雅的非同步編程，大牛們忙得焦頭爛額，一個個方案被提出來，如do.js. step.js, async.js, flow.js……，不是太雞肋，就是無法應用於前端。因此我們需要一個適合於前端的方案。
有件事我們必需明白，你想到的，人家都早已研究過了，並且已給出解決方案。十大javascript架構之一，Mochikit，就從Python的Twisted庫搞來Deferred，後來又給dojo學去，現在你們又看到，相同的東西又出現在jQuery1.5上了。不過，Mochikit的Deferred還有一個不為人知的分支，由日本大牛cho45搞出來（他同時也搞什麼BigInt，跨瀏覽器Testing，名氣緊隨amachang、uupaa、edvakf、nanto之後），叫JSDeferred。先說dojo那派系的（包括jQuery）的Deferred，一直處於無敵狀態，與Common.js搞出一套規範，什麼promises，then，when都是那時制定，jQuer基本全盤接受。另一分支，cho45的JSDeferred，構思非常奇特，沒有使用數組來裝載回呼函數，而是通過setTimeout,image.onload, postMessage等非同步機制巧妙地把維護列隊地工作道回瀏覽器自身，雖然有致命缺陷，但其易用性也被日本JS界所首肯，我的Deferred對象就從它的基本上發展過來的。Deferred這東西，我通常稱之為非同步列隊，因為它們的確是需要兩組由回調函接構成的隊列，非常之形象。
在我們搬出非同步列隊之前，讓我們看看普通的列隊是怎麼實現延遲的。
var Queue = function(){
this.list = []
}
Queue.prototype = {
constructor:Queue,
queue:function(fn) {
this.list.push(fn)
return this;
},
dequeue:function(){
var fn = this.list.shift()||function(){};
fn.call(this)
}
}
這樣調用它：
var q = new Queue;
q.queue(function(){
log(1)
}).queue(function(){
log(2)
}).queue(function(){
log(3)
});
while(q.list.length){
q.dequeune();
}
但這是同步，想非同步，我們需要用setTimeout，
var el = document.getElementById("test");
var q = new Queue();
q.queue(function(){
var self = this;
el.innerHTML = 1
setTimeout(function(){
self.dequeue()
},1000);
}).queue(function(){
var self = this;
el.innerHTML = 2
setTimeout(function(){
self.dequeue()
},1000);
}).queue(function(){
var self = this;
el.innerHTML = 3
setTimeout(function(){
self.dequeue()
},1000);
}).dequeue()
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>非同步編程 by 司徒正美</title>
<script>
var Queue = function(){
this.list = []
}
Queue.prototype = {
constructor:Queue,
queue:function(fn) {
this.list.push(fn)
return this;
},
dequeue:function(){
var fn = this.list.shift()||function(){};
fn.call(this)
}
}
window.onload = function(){
var el = document.getElementById("test");
var q = new Queue();
q.queue(function(){
var self = this;
el.innerHTML = 1
setTimeout(function(){
self.dequeue()
},1000);
}).queue(function(){
var self = this;
el.innerHTML = 2
setTimeout(function(){
self.dequeue()
},1000);
}).queue(function(){
var self = this;
el
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
