JavaScript非同期呼び出しフレーム(Part 3-コード実装)

まず、私たちは棚を作ります.必要な変数を全部並べます.コールバック関数のリストを保存するための配列が必要です.非同期の操作が完了したかどうかを示すためのフラグビットが必要です.IAsyncResultも勉強できます.stateを追加して、非同期の操作を可能にする実現者は外部にカスタムの実行状態を暴露します.最後に変数を追加して非同期の結果を保存します.

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

addCallback方法
次に、addCallback方法を実現したいです.その仕事の職責は簡単です.コールバックQueにコールバック関数を入れます.また、この時にcomplettedがtrueであれば、非同期操作が既にyieldを過ぎていると説明したら、直ちにこのコールバックを呼び出します.

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

私達はyieldの方法がcalbackQueの中のコールバック関数を一つずつ取り出して呼び出すと仮定していますので、completedがtrueであれば、既存のresultを使ってもう一度yieldを呼び出すだけでいいです.このようにyieldは自然に今回のcalbackQueに追加したコールバック関数を呼び出されます.
最後のreturn thisについては、jQueryスタイルのチェーン式書き方を便利にするために、ポイント区切りで連続的に複数のコールバック関数を追加できます.

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

yieldの方法
最後に、私達はyieldの方法を実現します.calbackQueの中のコールバック関数を一つずつ取り出して、もう一度呼び出して、この操作が非同期であることを保証する必要があるでしょう.

 
  
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; 
  
} 
  
 
 

set Timeoutを使用することによって、yieldの実際の操作は非同期的に行われることを確認しました.その後、ユーザーがyieldに入ってきた結果と関連状態をオブジェクトの属性に更新し、最後にコールバックQueを経由してすべてのコールバック関数を呼び出します.
結び目
このように私たちは簡単なJavaScript非同期呼び出しの枠組みを作りました.完全なコードはここを見ることができます.非同期呼び出しの枠組みはAync.Operationです.
このフレームワークは、同期非同期動作が共存している場合によく解決できます.すべての関数がAync.Operationに戻ると仮定して、フレームの使用者は、コードを作成するために統一されたパターンを使用してもいいです.処理関数は戻ります.
シリアルで複数の非同期関数を呼び出した場合、現在は入れ子addCallbackで書くことができますが、入れ子層数が増えるにつれて、コードがますます不格好になります.

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

入れ子をjQuery風のチェーン式に変えてもいいですか?これは私たちがこれから考えるべき問題です.もしあなたが関連する討論を見逃したくないならば.