ネストされたAjaxリクエスト - 実行順序問題

Question

私は自分のコードに2つのネストされたAJAXリクエストを持っています。ボタンが押されると発火します。私はAJAXリクエストが処理されている間、Bootstrapのロード段階を使ってボタンのテキストを "Loading ..."に変更しています。

問題は、内部のAJAXリクエストが完了する前にボタンがリセットされることです。

私の期待は、successコールバック内のすべてのコードが実行された後にのみ、外側のAJAXリクエストのcompleteコールバックが実行されることですが、それは起こっていません。

コードの簡略版は、次のようになります

$('#button').on('click', function() { 
$.ajax({ 
    url: …, 
    type: 'post', 
    data: …, 
    dataType: 'json', 
    beforeSend: function() { 
     $('#button').button('loading'); 
    }, 
    complete: function() { 
     $('#button').button('reset'); 
    }, 
    success: function(json) { 
     if (json['error']) { 
     … 
     } else { 
      $.ajax({ 
       url: …, 
       dataType: 'json', 
       success: function(json) { 
        for (var delayer = 1; delayer < 2000000000; delayer++) {} 
        … 
       }, 
       error: … 
      }); 
     } 
    }, 
    error: … 
});    
}); 

私はより良い私のマシンで効果をテストできるようにするには、任意の遅延ループを作成しました。それは私に約2秒の遅れを与えます。ボタンはほぼ即座にリセットされます。

それがどうやって動作するのか、そうでない場合はどうすればいいですか？

Answer 1

最初のAJAXリクエストの機能が、最初のAJAXリクエストが完了した時点で、最初のAJAXリクエストの機能が実行されています。 2番目の処理が完了した後に起動したい場合は、2番目のAJAXリクエストに移動してください。 completeコールバックがsuccessコールバックが発射されているのと同じ時間（約）で焼成されているので、あなたが混乱している:)

$('#button').on('click', function() { 
$.ajax({ 
    url: …, 
    type: 'post', 
    data: …, 
    dataType: 'json', 
    beforeSend: function() { 
     $('#button').button('loading'); 
    }, 
    success: function(json) { 
     if (json['error']) { 
     … 
     } else { 
      $.ajax({ 
       url: …, 
       dataType: 'json', 
       complete: function() { 
        $('#button').button('reset'); 
       }, 
       success: function(json) { 
        for (var delayer = 1; delayer < 2000000000; delayer++) {} 
        … 
       }, 
       error: … 
      }); 
     } 
    }, 
    error: … 
});    
}); 

理由があります。 successが完了すると、唯一の違いは、それが肯定応答（すなわち、HTTP 200 OK）

completeを取得するときにsuccessのみが発射されている間completeは、どんな結果解雇されていない解雇ではありません。詳細情報についてはjQuery documentation

ドキュメントをチェックアウトがcompleteがsuccess実行後に解雇されていることを言うが、これではcomplete前success仕上げのすべてがさえ呼ばれていることを意味するものではありませんありません。これはJavaScriptの非同期コーディングと関係があります。