0

我必须加载一个非常大的 JSON 对象并执行各种昂贵的过程。出于这个原因，我展示了一个总共增加五次的进度条。如果我必须加载 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 回答