Javascript goog.ui.ProgressBar奇怪的行为

我必须加载一个非常大的JSON对象并执行各种昂贵的过程。因此，我显示了一个进度条，它总共增加了五倍。如果我必须加载10000个项目，它将每2000次更新一次，等等

问题是效果不可见，因为所有堆栈都是在整个函数完成后执行的，而不是在进程的每20%更新progressbar。无论我尝试加载10000个项目还是200万个项目，都会发生同样的情况，从控制台日志之间的计算延迟来看，肯定有足够的处理时间来显示可见的进度效果。也许我不理解的javascript（我知道这不是这样做的方式）。你如何跟踪一个昂贵的过程，并使一个可见的进度条效果正常

登录

用户名：admin

密码：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);

---

问题在于JavaScript是单线程的，并且首先尝试执行计算。ProgressBar是异步的，只有在线程不忙时才会更新

您可以使用如下回调

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

问题是，您不能将参数传递给函数，必须使用全局变量（或至少是“对象”范围的变量）

---

我目前也有同样的问题，还没有找到一个真正好的解决方案。所以这是第一种方法。如果我找到另一个解决方案，我会在这里更新。

你说得对。我写这篇文章时很匆忙，把它和别的东西混在一起了。我不太确定模块管理器是否是正确的解决方案。在我需要进度更新的情况下，我进行了超过9亿次的计算。也许我误解了模块管理器的概念，也许你可以给我一个合适的例子？如果你找到了答案，如果你能提供给别人，那就太好了。只是为了将来。