Question

我需要在数据库中创建带票证的小册子。小册子的数量取决于用户在文本框中输入的内容。一本小册子可以有100张门票。这种小册子/票证的创建需要很长时间，因此我需要向最终用户显示进度。为此，我将ajax调用循环中的方法，并在成功时增加进度条。

在我尝试等待第一个ajax调用的成功方法然后再创建另一个之前的方法中。但是这个代码永远不会成功的方法虽然代码工作正常但没有循环进行单个调用。我也注意到循环无限期地运行。如何解决这个问题？

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.

编辑：重新阅读这个问题，这似乎是我在写这个答案时误解了它......这就是我要解决的问题：

你非常接近，但是使用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);
}

您循环以启动所有请求，并且成功函数会计算已完成的数量以跟踪进度百分比。您可以混合使用这两种解决方案，以确保您不会同时发送所有请求（因为它们不会全部通过，因为同时发生的浏览器请求有限制）。

同样的ajax调用循环

1 个答案: