複数の時間のかかる関数があり、それらがすべて完了した後に関数を実行したい、例えば:
data.x = thisTakes2Seconds();
data.y = thisTakes5Seconds();
http.post(data);
私はJavascriptのコールバックの概念に精通していますが、私がいくつかの機能を持っている場合、私は本当にいくつかの機能をネストしたコールバックを持っているはずですか?
回答 3 件
あなたの
thisTakesXSeconds
関数はすぐに結果を返します。これは、それらが同期的であることを示しています。コールバックの必要はありません。そのコードの実行には約7秒かかります。
もし
thisTakesXSeconds
始めました非同期 X秒かかったプロセス(ただし、帰る 結果はそうでないことを示唆しています)、完了プロセスを管理する方法を検討します。am I really supposed to have nested callbacks several functions deep?
その質問と、「はい」という答えに対する一般的な不満が、今や私たちに約束があり、さらには
async
さえもある理由です。 関数。 :-)あなたはあなたの
thisTakesXSeconds
を作ります 関数はプロミスを返し、関数が並行して実行できる場合、これらの行に沿って何かを実行します。Promise.all([ thisTakes2Seconds(), thisTakes5Seconds() ]) .then(([x, y]) => { data.x = x; data.y = y; // use or return `data` here }) // return the promise or add a `catch` handler
連続して(次々に)実行する必要がある場合、
thisTakes2Seconds() .then(x => { data.x = x; return thisTakes5Seconds(); }) .then(y => { data.y = y; // use or return `data` here }) // return the promise or add a `catch` handler
...これは
async
で少し明確に見える 関数:data.x = await thisTakes2Seconds(); data.y = await thisTakes5Seconds(); // use or return `data` here // add appropriate error handling (at this level or when calling the function)
いくつかの非同期呼び出しが実行された後、いくつかのコードの実行を処理するために使用したテクニックの1つは、「完了した」カウンターまたはオブジェクトを使用することです。
各関数は、以下を含むコールバックを実行します
if (counter == numberOfFuntionsIWantedToComplete) doTheAfterWeHaveAllDataThing`
関連記事
- ajaxコールバック後にインクリメントカウンターが機能しない
- 関数を計算し、1つの列をテーブル内の複数の列と比較する
- dplyrの%>%パイプを使用して複数のR変数を操作できるR関数を作成するにはどうすればよいですか?
- 関数に渡した後、オブジェクトのperl配列を逆参照します
- tkinterのafter()で関数を繰り返すことができません
- setIntervalコールバック関数は動的ではありません(Reduxの小道具)
- 複数のネストされたリストを1つの新しいリストに結合する関数
- ソート機能は、2番目の変更イベントの後にのみアクティブになります
- 同じ機能を複数のdivに適用する方法
- JavaScriptブール関数は複数の戻り値を許可します
非同期関数を簡単に処理するための最良の方法は、
promises
を使用することです 、およびasync/await
両方の機能を並行して実行したい場合は、そうすることができ、Promise.allの使用が終了するのを待ちます。
コールバックを使用する非同期関数が既にある場合、簡単に約束に変換できます。
bluebirdのようなライブラリには、コールバックAPIを約束するユーティリティメソッドが既にあります。
http://bluebirdjs.com/docs/api/promise.promisify.html
ブラウザで実行していて、古いものをサポートする必要がある場合は、babelを使用して
async/await
を変換できます。 ES5へ