ループ内で同じajaxコールを呼び出す

Question

データベースにチケットを含む冊子を作成する必要があります。ブックレットの数は、ユーザーがテキストボックスに入力する内容によって異なります。 1冊の小冊子には100枚のチケットがあります。このブックレット/チケットの作成には時間がかかるので、エンドユーザーに進捗状況を示す必要があります。この目的のために、私はajax呼び出しをループに入れ、成功の際にプログレスバーをインクリメントします。

私は最初のajax呼び出しの成功メソッドを待ってから別のものを作成しようとしています。しかし、このコードはsuccessメソッドには決して行きませんが、コードは単一呼び出しのループなしで正常に動作しています。ループが無期限に実行されていることにも気付きました。どのようにそれを修正するには？

Ajax呼び出し：

var number_of_booklets = 1; 
var progress = 0; 
var progressIncrement = 100/number_of_booklets; 

    while (i < number_of_booklets) { 
      if (i == index) { 
       index++; 
       bCalled = true; 
       $.ajax 
        ({ 
         type: 'post', 
         url: "/Booklet/AddBooklet", 
         data: { 'booklet': booklet }, 
         success: create_booklet_success, 
         failure: create_booklet_error, 
         timeout: 180000 
        }); 

      } 
     } 

成功方法：

function create_booklet_success(response) 
{ 
    i++; 
    progress = progress + progressIncrement; 
    $('#progressbarVal').html(Math.round(progress).toString()+"%"); 
    $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress); 
    if (progress == 100) 
    { 
     $('.content-wrapper').removeClass('whirl duo'); 
     $("#progressbarModal").modal('hide'); 
    } 
    //console.log(progress); 
    console.log(i) 
} 

Answer 1

あなたのコードの問題は、それが別のものを送信するために仕上げにAJAX呼び出しを待たないということです...これがループほぼ無期限に、毎秒何千ものリクエストを作成します。

代わりに、ajaxを成功に送ります。この方法で、新しいリクエストを送信する前に最後のリクエストが終了したことを確認します。また、100％進歩の成功を収めたときにajaxコールを停止することもできます。

function makeAjax(){ 
    $.ajax({ 
     type: 'post', 
     url: "/Booklet/AddBooklet", 
     data: { 'booklet': booklet }, 
     success: create_booklet_success, 
     failure: create_booklet_error, 
     timeout: 180000 
    }); 
} 
function create_booklet_success(response) 
{ 
    progress = progress + progressIncrement; 
    $('#progressbarVal').html(Math.round(progress).toString()+"%"); 
    $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress); 
    if (progress == 100) 
    { 
     $('.content-wrapper').removeClass('whirl duo'); 
     $("#progressbarModal").modal('hide'); 
    }else{ 
     makeAjax(); 
    } 
} 
makeAjax();//Start the loop. 

EDIT：再読み込み質問を、これは私はこの答えを書いたとき、私はそれを誤解のように...ここで私はあなたの問題に取り組むためにやるだろ何思える：

あなたはかなり接近していたが、ちょうどインクリメンタルな目的のためにwhileループを使用することは、あなたが溺れてしまったものでした。

var number_of_booklets = 1; 
var progress = 0; 
for(var i=0;i<number_of_booklets;i++){ 
    $.ajax({ 
     type: 'post', 
     url: "/Booklet/AddBooklet", 
     data: { 'booklet': booklet }, 
     success: create_booklet_success, 
     failure: create_booklet_error, 
     timeout: 180000 
    }); 
} 
function create_booklet_success(response) 
{ 
    progress++; 

    var percent = Math.round(progress/number_of_booklets).toString(); 
    $('#progressbarVal').html(percent +"%"); 
    $('.progress-bar').css('width', percent + '%').attr('aria-valuenow', percent); 
    if (progress == number_of_booklets) 
    { 
     $('.content-wrapper').removeClass('whirl duo'); 
     $("#progressbarModal").modal('hide'); 
    } 
    //console.log(progress); 
} 

すべての要求を開始するためにループし、成功関数は、進捗率を追跡するために実行された回数をカウントします。両方のソリューションを混在させて、すべてのリクエストを同時に送信しないようにすることができます（ブラウザの同時リクエストには制限があるため、すべてのリクエストが同時に送信されるわけではありません）。