как показать «рабочий» индикатор при вставке большого количества элементов DOM

Question

При создании и вставке DOM-элементов кажется, что функции, используемые для задачи, возвращаются до того, как элементы отображаются на странице.

Перед тем, как начать вставлять элементы, я установил свойство отображения div в 'block', а после вставки элементов я установил свойство 'none', проблема в том, что индикатор не отображается на странице. Возможно ли это сделать? Где $ - псевдоним для document.getElementById.

$('loading').className="visible";
var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
    var para = document.createElement('p');
    para.appendChild(document.createTextNode('Paragraph No. ' + i));
    container.appendChild(para);    
    }
$('loading').className="hidden";

Похоже, что createElement и / или appendChild работают асинхронно, поэтому я почти сразу скрываю индикатор?

Answer 1

setTimeout () является ответом. Простое изменение в одну строку для вас:

$('loading').className="visible";
setTimeout(function() {
    var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
        var para = document.createElement('p');
        para.appendChild(document.createTextNode('Paragraph No. ' + i));
        container.appendChild(para);    
    }
    $('loading').className="hidden";
}, 0);

Answer 2

Вы никогда не хотите, чтобы что-либо занимало слишком много времени в браузере. Он убивает пользовательский интерфейс, включая (к сожалению) анимированные GIF-файлы, используемые в качестве неопределенных индикаторов прогресса.

Решение состоит в том, чтобы разбить процесс на, скажем, 50 вызовов с помощью setTimeout () для функции, которая добавляет 1000 элементов.

Answer 3

Я считаю, что DOM не будет обновляться до тех пор, пока не завершится выполнение сценария.

Чтобы заставить его работать асинхронно, вы можете попробовать обернуть его в вызов setTimeout с тайм-аутом ноль миллисекунд. В псевдокоде:

showLoadingIndicator();
setTimeout(addElements, 0);
function addElements() {
    // perform your loop here
    hideLoadingIndicator();
}