非常に簡単です:
function someFunction() {
//1. code that needs to run before ajax
$.ajax({...}).done(function () {
//2. code that needs to be run after the ajax call has returned
});
//3. code that needs to be run between the time the user presses
// a button and the time everything is done.
}
これは、JavaScriptの実行が同期しているために機能します(ワーカーが使用されている場合を除きますが、これはこの特定の問題とは関係ありません)。コードの最初のビットが実行され、次にajax呼び出しがブラウザーにXHR要求を開始するように指示しますが、someFunction
終了していないため、同期的に実行を継続します。
完了someFunction
すると、制御フローは発生する非同期イベントに対して開かれ、最終的にはdone
コールバックにつながります。
公平を期すために、非同期のイベント指向プログラミングは、ほとんどの人が頭を悩ませるのは簡単ではありません。どのコードがいつ発生するかを見失いがちです。
非同期動作がどのように機能するかを簡単に実行できる例を次に示します。
(function () {
alert(1);
setTimeout(function () {
alert(2);
}, 0); //note the 0ms delay
alert(3);
}());
アラートの順序は、、、に1
なり3
ます2
。setTimeout
指定された時間が経過するのを待つことに依存しているため、コールバックを同期的に呼び出すことはありません。したがって、時間が経過しない場合でも、現在の関数が終了するのを待ってから続行する必要があります。