|
|
首先我們來搭一個架子，把需要用到的似有變量都列出來。我們需要一個數組，來保存回調函數列表；需要一個標志位，來表示異步操作是否已完成；還可以學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風格的鏈式寫法，可以通過點號分隔連續添加多個回調函數：
復制代碼 代碼如下:
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。
這個框架能夠很好的解決調用棧中出現同步異步操作并存的情況，假設所有函數都返回Async.Operation，框架的使用者可以使用一種統一的模式來編寫代碼，處理函數返回，而無需關心這個函數實際上是同步返回了還是異步返回了。
對于串行調用多個異步函數的情況，我們現在可以用嵌套addCallback的方式來書寫，但隨著嵌套層數的增多，代碼會變得越來越不美觀：
復制代碼 代碼如下:
firstAsyncOperation().addCallback(function() {
secondAsyncOperation().addCallback(function() {
thirdAsyncOperation().addCallback(function() {
finalSyncOperation();
});
});
});
我們能否把嵌套形式改為jQuery風格的鏈式寫法呢？這是我們接下來要思考的問題，如果你不希望錯過相關討論的話
JavaScript技術：JavaScript 異步調用框架 (Part 3 - 代碼實現)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
