這可能是個比較深的話題。何謂異步?

籠統地說，異步在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()  

如大家所見，這樣寫絕對不友好。我們需要把setTimeout整到Queue類中去，另對queue做一些修改，不要只彈出一個函數進行執行，通常情況下會對列隊中的所有回調進行操作的，如domReay，多投事件。

var Queue = function(){  
  this.list = []  
}  
Queue.prototype = {  
  constructor:Queue,  
  queue:function(fn) {  
    this.list.push(fn)  
    return this;  
  },  
  wait:function(ms){  
    this.list.push(ms)  
    return this;  
  },  
  dequeue:function(){  
    var self = this, list = self.list;  
    var el = list.shift()||function(){};  
    if(typeof el == "number"){  
      setTimeout(function(){  
        self.dequeue();  
      },el);  
    }else if(typeof el == "function") {  
      el.call(this)  
      if(list.length)  
        self.dequeue();  
    }  
  }  
}  

Great，如果我們能自由控制每個回調的間隔，這對于做動畫效果說，就變得非常簡單了。但這Queue類相對我們最初定下的目標來說，還是差得遠。Ajax，多投事件，domReay將統統劃歸于它的麾下，因此它需要用一些適用性更強的API。用過dojo的人也知，它的Deferred就像DNA的染色體一樣，是雙線的，可以捕捉不在同一時間線上的異常，而且這些列隊不能像衛生筷那樣用完一次就廢了，這樣就無法支撐多投事件的實現了。想要實現這些功能，就需要一個很復雜的東西，我將在第二部分隆重介紹我的異步列隊，看它是如何優雅地解決這些問題。

原文：http://www.cnblogs.com/rubylouvre/archive/2011/03/14/1982699.html

【編輯推薦】

1. JavaScript異步編程之Jscex無創痕切入jQueryUI
2. Jscex+jQuery UI打造游戲力度條
3. Jscex模擬重力場與google蘋果logo的比較
4. JavaScript異步編程之用Jscex畫圓