jQuery：跟踪加载请求进度答案

【问题标题】：jQuery: tracking load request progressjQuery：跟踪加载请求进度
【发布时间】：2012-01-23 20:49:58
【问题描述】：

我一直在寻找一种方法来跟踪 jQuery .load() 请求中加载的数据量。我想要的是一个在加载数据量增加时扩展的栏——一个进度条。而这个进度条应该听.load()的请求。

在我 2 小时的研究中，我一直在研究长期池化、JSON 等。但我不知道我是否走在正确的轨道上。

如何让进度条监听 jQuery .load() 请求并随着加载的数据量按比例增加？

【问题讨论】：

看看这个：stackoverflow.com/questions/76976/…

【解决方案1】：

您可以将.load() 调用拆分为几个较小的 AJAX 请求，并在每个请求完成时更新进度条并启动下一个 AJAX 请求。没有可以绑定到像ajax-progress 这样的事件，服务器响应“一次性”发送，一旦浏览器收到所有响应，就会调用 AJAX 请求的success 回调函数。

$(function () {
    var total    = 5,
        current  = 1,
        response = [];
    function do_ajax() {
        $.ajax({
            url : 'server-side.php?page=' + current
            success : function (serverResponse) {
                response[response.length] = serverResponse;
                $('#progress-bar').text(current + ' of ' + total + ' are done');
                current++;
                if (current <= total) {
                    do_ajax();
                }
            }
        });
    }
});

【讨论】：

【解决方案2】：

当我们有这样一个任务来跟踪长 ajax 进程的状态时。
我们所拥有的 - 是对另一个页面的请求，计算服务器上存储或处理的实际数据，以完成百分比的值响应。所以

var stillLoading = true;
$.get('long-process-url', function(data){
    stillLoading = false;
    //code on success
});

checkStatus()    

function checkStatus() {
    if(stillLoading) {
        setTimeout(function(){
            $.get('get-stats-of-process-url', function(data){
                $('#percent').val(data);
                checkStatus();
            }
        }, 1000);
     }
}

【讨论】：