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

ここで 2 つの質問があります。 1. すべてのブラウザーで、その innerHTML 部分に問題があります。ページが「ハング」するため、プログレスバーが更新されません。この問題の解決策はありますか?

  1. ここで、Ajax リクエストが完了するまで 10 秒待つ必要があります。その後、JavaScript の解析が行われます (そして、innerHTML が開始されます)。リアルタイムで分割したいのですが、可能ですか？

データが非常に複雑で、パート 1 の結果が 2 つの計算の基礎となるため、40 個の小さな ajax 要求を作成することはできません。

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

進行状況を非同期で更新する必要がありますが、現在のように、すべてのデータが読み込まれた後に最終処理を行います。

そのためには、XMLHttpRequest の進行イベントをリッスンできるように、$.ajax() メソッドを使用するようにコードを更新する必要があります。

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

このコードにより、ブラウザがハングしないようにサーバーからデータを非同期に受信できるようになり、データの読み込みが遅いプロセスで進行状況バーが更新されます。

データの読み込みが完了した後、処理に 2 番目の進行状況バーを提供することも、同じ進行状況バーを再利用することもできます。

于 2013-11-12T21:02:12.333 に答える