循环中的相同ajax调用

Question

I need to create booklets with tickets in the database. The number of booklets depends upon what user enters in the textbox. One booklet can have 100 tickets. This creation of booklets/tickets take a long time, so i need to show progress to end user. For this purpose I put the ajax call to method in loop and increment the progress bar on success .

In the approach I'm trying to wait for the success method of first ajax call before making another. but this code never goes to the success method although code is working fine without loop for single call. I also noticed that loop runs indefinitely. How to fix it any idea?

Ajax call:

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
                    });

            }
        }

success method:

 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

The problem with your code is that it does not wait for ajax call to finish to send another one... This will loop almost indefinitely and create thousands of requests per second.

What you should do instead is send the ajax in the success, this way you make sure the last request has ended before sending the new one. It will also allow you to stop the ajax calls when you receive a 100% progress success.

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: re-reading the question, this seems like I misunderstood it when I wrote this answer... Here's what I'd do to tackle your problem:

You were pretty close, but using a while loop for just incremental purpose was what got you drowning.

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);
}

You loop to launch all requests, and the success function counts how many has been done to track the percentage of progress. You could mix both solutions to make sure you do not send all requests at the same time (as they won't all go through anyways, since there are limits on simultaneous browser requests).