Clever Geek Handbook

非同期呼び出しの同期。 ウェイトシンク

挑戦する



サーバーに対して2つ以上のAJAXリクエストを実行し、それらすべてが終了した後に関数を呼び出したいとします。



ちょっとした問題は、これらのリクエストのどれが最初に終了するかわからず、誰がコールバックを保留するかわからないことです。



グローバル変数を設定し、各リクエストの最後に別のリクエストが完了したかどうかを確認できます。



実際、これは私の小さなクラスのWaitSync =）が行うことです。



WaitSync.js



使い方は簡単です：



1.タイプWaitSyncのオブジェクトを作成し、必要なタスクが完了した後に呼び出される関数をコールバックコンストラクターに渡します 。 

var vulture = new WaitSync(function () { console.debug('Start eating: ', arguments); });




2.単純な代わりに 

  $.getJSON( 'savannah/get_prey', function (data) { console.log('... prey found: ' + data); } ); $.getJSON( 'savannah/get_other_predators', function () { console.log('... predators are done eating'); } );




.wrapメソッドでの「ラップ」タスク 

  $.getJSON( 'savannah/get_prey', vulture.wrap( function (data) { console.log('... prey found: ' + data); } ) ); $.getJSON( 'savannah/get_other_predators', vulture.wrap( function () { console.log('... predators are done eating'); } ) );




3.すべて=）両方のAJAXリクエストが完了するとすぐに、ハゲタカは食べ始めます。





どのように機能しますか？





WaitSyncオブジェクトを作成するときは、コンストラクターに引数として渡します

同じコールバック。



.wrapメソッドを呼び出してそれに関数を渡すと、呼び出しのカウントと検証を行う別の関数が作成されます。 2番目の引数として、コンテキスト（ thisを介してアクセスできるオブジェクトへの参照）を渡すこともできます。 本当に必要な場合は...



それは実際、クラスはあなたのためにあなたが一度か二度あなた自身の手でやることをあなたのためにして、それからそのような何かを書くことに決めます:)



名前付き/グループ化されたタスク



Ajaxリクエストを行い、エラーも処理したいとします： 

 var monkeyBusiness = new WaitSync(function () {}); $.ajax({ url: '/cgi-bin/palm-tree', success: function (data) { console.log(' eat bananas :) '); }, error: function (data) { console.log(' eat banana peels :( '); } }); $.ajax({ url: '/cgi-bin/monkey-party', success: function (data) { console.log(' dance :) '); }, error: function (data) { console.log(' make political party :( '); } });




成功またはエラーのいずれかが常に実行されます。 それらのいずれかが発生した場合は、2番目の待機を停止する必要があります。



これを行うには、タスクの識別子（文字列または数値）を考えて、最初のパラメーター.wrapを渡します。 



 var monkeyBusiness = new WaitSync(function () { console.log('Yay! :(|) End of the day'); }); $.ajax({ url: '/cgi-bin/palm-tree', success: monkeyBusiness.wrap( 'palmTree', function (data) { console.log(' eat bananas :) '); return "banana success"; } ), error: monkeyBusiness.wrap( 'palmTree', function (data) { console.log(' eat banana peels :( '); return "banana failure"; } ) }); $.ajax({ url: '/cgi-bin/monkey-party', success: monkeyBusiness.wrap( 'monkeyParty', function (data) { console.log(' dance :) '); return "success"; } ), error: monkeyBusiness.wrap( 'monkeyParty', function (data) { console.log(' make political party :( '); return "error"; } ) });




これで、サルが手のひらを降りるとすぐにコールバックが実行され、他の人はパーティーを終了します。



ボーナス！



実際、WaitSyncはさらにいくつかの情報を収集します。



いくつかの有用な情報を含むオブジェクトがコールバックに渡されます： 

 var monkeyBusiness = new WaitSync( function (result) { console.log('Tasks were complete in the following order: ' + result.order.join(', ')); console.log('Palm tree: ' + result.data['palmTree']); console.log('Monkey party: ' + result.data['monkeyParty']); } );




順序サブ配列には、タスクが実行された順序が格納されます。



groupOrderサブ配列には、名前付きタスク/グループのみの順序が格納されます。



データ部分配列には、すべての名前付きタスクを返した値が格納されます。



おわりに



そのようなことはめったに必要ないと思います。 node.jsでは、便利になるかもしれません...



一般的に、ここに=）あなたの健康を使用してください！



github.com/TEHEK/waitsync



PS：投稿の作成中に、XD APIを2回書き直しました



PPS：私が公開した後、以前に公開された同じトピックに関するトピックに気づきました...ショックのおかげで、意見が残っており、ハイライトされています））


More articles:


All Articles