在上一篇文章里，我們說到了要實現一個用于JavaScript異步調用的Async.Operation類，通過addCallback方法傳遞回調函數，并且通過yield方法返回回調結果?，F在我們就來實現這個類吧。

類結構

首先我們來搭一個架子，把需要用到的似有變量都列出來。我們需要一個數組，來保存回調函數列表；需要一個標志位，來表示異步操作是否已完成；還可以學IAsyncResult，加一個state，允許異步操作的實現者對外暴露自定義的執行狀態；最后加一個變量保存異步操作結果。

Async = {  
  Operation: {  
    var callbackQueue = [];  
    this.result = undefined;  
    this.state = "waiting";  
    this.completed = false;  
  }  
} 

addCallback方法

接下來，我們要實現addCallback方法，它的工作職責很簡單，就是把回調函數放到callbackQueue中。此外，如果此時completed為true，說明異步操作已經yield過了，則立即調用此回調。

this.yield = function(callback) {  
  callbackQueue.push(callback);  
  if (this.completed) {  
    this.yield(this.result);  
  }  
  return this;  
} 

我們假設yield方法會把callbackQueue中的回調函數逐個取出來然后調用，因此如果compeleted為true，則使用已有的result再調用一次yield就可以了，這樣yield自然會調用這次添加到callbackQueue的回調函數。

至于最后的return this;，只是為了方便jQuery風格的鏈式寫法，可以通過點號分隔連續添加多個回調函數來實現JavaScript異步調用：

asyncOperation(argument)  
  .addCallback(firstCallback)  
  .addCallback(secondCallback); 

yield方法

最后，我們要實現yield方法。它需要將callbackQueue中的回調函數逐個取出來，然后都調用一遍，并且保證這個操作是異步吧。

this.yield = function(result) {  
  var self = this;  
  setTimeout(function() {  
    self.result = result;  
    self.state = "completed";  
    self.completed = true;  
    while (callbackQueue.length > 0) {  
      var callback = callbackQueue.shift();  
      callback(self.result);  
    }  
  }, 1);  
  return this;  
} 

通過使用setTimeout，我們確保了yield的實際操作是異步進行的。然后我們把用戶傳入yield的結果及相關狀態更新到對象屬性之上，最后遍歷callbackQueue調用所有的回調函數。

小結

這樣我們就做好了一個簡單的JavaScript異步調用框架，完整的代碼如下：

Async = {  
    Operation: function() {  
        var callbackQueue = [];  
        this.result = undefined;  
        this.state = "running";  
        this.completed = false;  
 
        this.yield = function(result) {  
            var self = this;  
            setTimeout(function() {  
                self.result = result;  
                self.state = "completed";  
                self.completed = true;  
 
                while (callbackQueue.length > 0) {  
                    var callback = callbackQueue.shift();  
                    callback(self.result);  
                }  
            }, 1);  
            return this;  
        };  
 
        this.addCallback = function(callback) {  
            callbackQueue.push(callback);  
            if (this.completed) {  
                this.yield(this.result);  
            }  
            return this;  
        };  
    }  
}; 

這個框架能夠很好的解決調用棧中出現同步異步操作并存的情況，假設所有函數都返回Async.Operation，框架的使用者可以使用一種統一的模式來編寫代碼，處理函數返回，而無需關心這個函數實際上是同步返回了還是異步返回了。

對于串行調用多個異步函數的情況，我們現在可以用嵌套addCallback的方式來書寫，但隨著嵌套層數的增多，代碼會變得越來越不美觀：

firstAsyncOperation().addCallback(function() {  
  secondAsyncOperation().addCallback(function() {  
    thirdAsyncOperation().addCallback(function() {  
      finalSyncOperation();  
    });  
  });  
}); 

我們能否把嵌套形式改為jQuery風格的鏈式寫法呢？這是我們接下來要思考的問題。

【編輯推薦】

1. JavaScript異步調用框架用例設計
2. JavaScript異步調用框架問題描述
3. 淺談如何用Javascript+VML實現流程設計器
4. 常用的JavaScript驗證正則表達式
5. 給JavaScript初學者的24個小竅門