0

非常に大きな JSON オブジェクトをロードし、さまざまな高価なプロセスを実行する必要があります。このため、合計 5 回増加するプログレス バーを表示しています。10000 個のアイテムをロードする必要がある場合、2000 回ごとに更新されます。

問題は、プロセスの 20% ごとにプログレスバーを更新するのではなく、関数全体が完了した後にすべてのスタックが実行されるため、効果が見えないことです。10000 個のアイテムをロードしようとしても、200 万個のアイテムをロードしようとしても、同じことが起こります。コンソール ログ間の計算遅延から判断すると、目に見える進捗効果を示すのに十分な処理時間があることは間違いありません。おそらく、私はjavascriptを理解していません（これがそれを行う方法ではないことはわかっています）。コストのかかるプロセスを追跡し、プログレス バーの効果を適切に表示するにはどうすればよいでしょうか?

これがjsファイルです。

でログイン

ユーザー名: 管理者

パスワード: testit

    var initItems = function(publicationItems) {
    var publications = new Array();
    var numberOfItems = goog.object.getCount(publicationItems);
    var minStep = 20;
    var currentProgress = 20;
    var progressBarStep = parseInt(numberOfItems / 5);
    var i = 0;
    goog.object.forEach(publicationItems, function() {
            var currentName = publicationItems.name;
            var currentCat = publicationItems.categories;
            // Insert clear div to break line after every 5 items.
            if (i % 5 == 0 && i != 0)
                publications.push(this.clear);
            if(i % progressBarStep == 0)  
            {
                progressBar.setValue(currentProgress);
                console.log(i + ' ' + progressBarStep + ' ' + currentProgress + ' ' + progressBar.getValue());
                currentProgress += minStep;             
            }
            i++;
            publications.push(goog.dom.createDom('div', {
            'style' : 'width:' + this.currentPublicationDimension + 'px;height:' +
            this.currentPublicationDimension + 'px;border:1px solid #B3B3B3;' +
            'float: left;margin-top: 5px;background-color: #FCFCFC;' +
            'max-width:' + this.currentPublicationDimension + 'px;max-height:' +
            this.currentPublicationDimension + 'px;_height:' +
            this.currentPublicationDimension +
            'px;_width:' + this.currentPublicationDimension + 'px;margin-left:' +
            this.publicationLeftMargin + 'px;',
            'class' : 'publication'
            }, currentName, currentCat));
        }, this);
        return publications;
    };

そして、この関数が呼び出されたコンテキスト:

// Bind COMPLETE event listener to ajaxHandler.
goog.events.listen(ajaxHandler, goog.net.EventType.SUCCESS,
goog.bind(function(e) {
    //goog.style.showElement(progressBarContainer, false);
    goog.dom.append(this.mainViewPublications, initItems.call(this, e.target.getResponseJson()));
}, this), false, this);
4

1 に答える 1

1

問題は、JavaScript がシングルスレッドであり、最初に計算を実行しようとすることです。ProgressBar は非同期で、スレッドがビジーでない場合にのみ更新されます。

次のようなコールバックを使用できます

function a () {
  /* do one iteration */
  progressBar.setValue(currentProgress);
  goog.Timer.callOnce(a, 10);
}

その問題は、関数にパラメーターを渡すことができず、グローバル変数 (または少なくとも「オブジェクト」ワイド変数) を使用する必要があることです。

私は現在同じ問題を抱えており、本当に良い解決策を見つけていません。したがって、これが最初のアプローチです。別の解決策を見つけたら、ここで更新します。

于 2012-12-05T16:18:32.170 に答える