自定义代码的进度条（无文件上传）答案

【问题标题】：Progress bar for custom code (no file upload)自定义代码的进度条（无文件上传）
【发布时间】：2013-09-13 14:00:10
【问题描述】：

我想了解有关进度条的更多信息。我知道他们使用要上传的文件，因为您知道它的大小。但是如果我没有文件但有一些代码可以用 jquery/ajax 执行，我想用进度条显示进度怎么办。是否可以？为了给您提供更多详细信息，我的代码会在多个网站上获取许多数据，对其进行转换，最后将它们保存到数据库中。

编辑：这是我的 ajax 调用示例：

function submit_form(form, link, file, button)
{
    var form_data = $(form).serialize();
    $.ajax
    ({
        url: link,
        type: 'POST',
        dataType: 'json',
        data: form_data,
        success: function(result)
        {
             handle_result(form, result, link, button);
        }
    });
}

【问题讨论】：

标签： jquery ajax jquery-ui progress-bar

【解决方案1】：

jQueryUI Progressbar docs 说可以自己设置进度条的值：

$( ".selector" ).progressbar( "value", 50 );

所以，解决问题的一种方法是：如果您知道正在执行的操作（获取数据、转换、写入数据库）的数量，那么您可以在其中一个操作完成时增加 Progressbar 的值：

var completed = 0;
var total = 10;

doSomething().done(function(result) {
  completed++;
  $("#progress-bar").progressbar("value", 100 * (completed / total));
});

【讨论】：

假设我有 10 个操作要执行...这是否意味着我必须执行 10 个 ajax 调用？！！ done 会在 ajax 调用完成后调用，对吧？
done() 是 Promise 对象的属性。 $.ajax() 返回一个 Promise 对象，你是对的，但很多其他事情也是如此。但是 Promise 只是判断操作何时完成的一种方式。你是程序员——只要你决定一个操作完成，你就可以打开completed并重新绘制你的滚动条。
不太明白...我调用我的 ajax 函数一次来执行我的所有操作。这是否意味着我只能在进度条上显示 0 和 100%？我应该为每个要执行的任务进行一次 ajax 调用吗？在我的程序中，一旦执行了单个操作操作，我可以向 ajax 发送消息吗？

【解决方案2】：

阅读更多关于 $.ajax() 函数和 XMLHttpRequest 对象的xhr 选项。您需要关注的是向其添加“进度”事件侦听器。您也可以尝试一些现成的解决方案，例如 jquery 的 Reload Progress Bar 插件，它扩展了 $.ajax() 函数，以便您可以在任何 Ajax 请求中使用进度条。

【讨论】：

我猜你说的是这篇文章：stackoverflow.com/a/11888855/1875861。据我了解，您可以通过测量xhr.getResponseHeader('Content-length') 来评估进度。这只能用于上传或下载文件，对吧？就我而言，我在后台执行许多操作并仅返回成功消息。可以用吗？