goog.ui.ProgressBar странное поведение

Question

Мне нужно загрузить очень большой объект JSON и выполнить различные дорогостоящие процессы. По этой причине я показываю индикатор выполнения, который увеличивается в пять раз. Если мне нужно загрузить 10000 предметов, он будет обновляться каждые 2000 раз и т. Д.

Проблема в том, что эффект не виден, потому что весь стек выполняется после завершения всей функции, вместо обновления индикатора выполнения на каждые 20% процесса. Не имеет значения, пытаюсь ли я загрузить 10000 элементов или 2 миллиона элементов, происходит то же самое, и, судя по задержке вычислений между журналами консоли, времени обработки достаточно, чтобы показать видимый эффект прогресса. Возможно, я не понимаю javascript для (я знаю, что это не был способ сделать это). Как вы отслеживаете дорогостоящий процесс и правильно делаете видимый эффект индикатора прогресса?

Это файл js.

войдите с

имя пользователя: admin

пароль: тестить

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

Answer 1

Проблема в том, что JavaScript является однопоточным и сначала пытается выполнить вычисления. ProgressBar является асинхронным и будет обновляться, только если поток не занят.

Вы можете использовать обратные вызовы, такие как следующие

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

Проблема в том, что вы не можете передавать параметры в функцию и должны использовать глобальные переменные (или, по крайней мере, переменные типа "объект").

У меня сейчас такая же проблема, и я не нашел действительно хорошего решения. Так что это первый подход. Если я найду другое решение, я обновлю его здесь.