1

打开页面时，我发出 Ajax 请求。此请求大约需要 10 秒才能加载并返回大约 11MB 的数据。

这个 Ajax 请求的响应需要通过 InnerHTML 在 DOM 中设置。对于 Internet Explorer，这 11MB 可以同时处理很多，所以我将这 11MB 分成 40 个小块。

这是我的代码：

$.get('url')
.done(function( data ) {
    splitdata = data.split('<!-- START -->');

    data = '';

    var length = splitdata.length;

    for (var i = 0; i < length; i++)
    {
        var brin        = String(splitdata[i].split('\n')[0].replace("<!-- ",'').replace(' -->', ''));
        var percentage  = Math.round(((i+1)*100)/(length + 2));
        var data        = splitdata[i];

        if(brin.length != 0)
        {
            (function(brin, percentage, data) {
                setTimeout(function() {
                    console.log(brin);
                    console.log(percentage+'%');

                    document.getElementById('tab_'+brin).innerHTML = data;
                    //$('#tab_'+brin).html(splitdata[i]);
                }, 0);
            })(brin, percentage, data)

            $('#loadingbar').css('width', percentage+'%');
        }
    }

    ajaxBegrotingDone(callback);
})
.fail(function() {
    ajaxBegrotingFail(callback);
});

现在我有两个问题： 1. 所有的浏览器都有一些关于innerHTML 部分的问题。页面“挂起”，所以我的进度条没有更新。这个问题有解决方案吗？

  1. 现在我需要等待 10 秒，直到我的 Ajax 请求完成。之后 JavaScript 解析（因此 innerHTML 开始）。我会很高兴实时拆分，这可能吗？

不可能发出 40 个小的 ajax 请求，因为数据非常复杂，第 1 部分的结果是两个计算的基础，依此类推。

4

2 回答 2

1

感谢 Boothinator，解决了我自己的问题。该代码需要一些改进，但它可以按预期工作：

$   .ajax({
                url:            'url',
                dataType:       'html',
                processData:    false,
                xhr:            function()
                                {
                                    var xhr         = $.ajaxSettings.xhr();
                                    var data        = [];

                                    xhr.addEventListener("progress", function(evt)
                                    {
                                        if(data.length > 0)
                                        {
                                            splitdata = xhr.responseText.split(data.join('<!-- START -->'))[1].split('<!-- START -->');
                                        }
                                        else
                                        {
                                            splitdata = xhr.responseText.split('<!-- START -->');
                                        }

                                        var length = splitdata.length;

                                        for (var i = 0; i < length-1; i++)
                                        {
                                            if(splitdata[i] !== undefined)
                                            {
                                                var brin        = String(splitdata[i].split('\n')[0].replace("<!-- ",'').replace(' -->', ''));

                                                if(brin.length != 0)
                                                {
                                                    var percentage  = Math.round(((data.length+1)*100)/(40 + 2));

                                                    data.push(splitdata[i]);

                                                    console.log(brin);
                                                    console.log(data.length);
                                                    console.log(percentage);

                                                    document.getElementById('tab_'+brin).innerHTML = splitdata[i];
                                                    //$('#tab_'+brin).html(data[i]);

                                                    $('#loadingbar').css('width', percentage+'%');
                                                }
                                            }
                                        }
                                    }, false);

                                    return xhr;
                                }
于 2013-11-13T10:43:10.690 回答
0

您应该异步更新进度，但在加载所有数据后进行最终处理，就像现在一样。

为此，您应该更新您的代码以使用 $.ajax() 方法，以便您可以监听 XMLHttpRequest 的进度事件。

$.ajax({
    url: 'url',
    xhr: function()
    {
        var xhr = $.ajaxSettings.xhr();
        //Download progress
        xhr.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percentage = 100 * evt.loaded / evt.total;
            $('#loadingbar').css('width', percentage+'%');
            }
        }, false);
        return xhr;
    },
    complete: /* done() callback */,
    error: ajaxBegrotingFail(callback)
});

此代码将允许您从服务器异步接收数据，这样浏览器就不会挂起，并且会在加载数据的缓慢过程中更新进度条。

您甚至可以在数据加载完成后为您的处理提供第二个进度条，或者重复使用相同的进度条。

于 2013-11-12T21:02:12.333 回答