Индикатор выполнения Javascript не обновляется «на лету», но сразу после завершения процесса?

Question

У меня есть цикл, который должен обновлять индикатор выполнения по мере увеличения цикла, однако он окрашивает индикатор выполнения только за один раз после того, как цикл фактически завершился.Я помню, что у меня была похожая проблема: если бы я использовал операторы alert, то раскраска работала бы, поэтому я думаю, что это связано с параллелизмом потоков.Чтобы решить мою старую проблему, я использовал setTimeout.Однако, это все еще не окрашивает мой индикатор в реальном времени.

Вот что я делаю:

for (var i = 0; i < numOfRows; i++) {
    setTimeout('ColourBlock(' + i + ')', 0);

    // do_work
}

function ColourBlock (position){
    document.getElementById("block" + position).style.backgroundColor = "orange";
}

Кто-то сказал мне, что это может быть из-за оптимизации JavaScript?Может кто-нибудь помочь, пожалуйста?

Answer 1

Дело не в темах. Речь идет о том факте, что когда код выполняет быструю последовательность изменений DOM или стиля, браузер не пытается обновить представление между ними. Вместо этого он ждет, пока все успокоится, а затем перерисовывается.

Если вы закодировали последовательность, как вы описываете, с ненулевым значением времени ожидания (скажем, 100 миллисекунд) для каждого изменения, то вы увидите, что это произойдет. Как вы уже написали, с нулевым тайм-аутом миллисекунды все обновления будут происходить в течение очень короткого периода времени - вероятно, намного меньше миллисекунды, если у вас нет тысяч таких блоков.

(Обратите внимание, что ваш пример кода не будет давать 100 в качестве тайм-аута для каждого изменения; вам придется постепенно увеличивать их в будущем, добавляя еще 100 для каждого. Или вы можете использовать интервальный таймер и отменить это после последнего обновления.)

Answer 2

Браузеры не будут обновлять пользовательский интерфейс во время выполнения кода JavaScript.Когда код завершает работу и управление возвращается в пользовательский интерфейс, обновления происходят сразу.

Это также причина, по которой он работал с оповещениями - когда всплыло предупреждение, выполнение javascript было приостановлено, и управление было возвращенопользовательский интерфейс.

Answer 3

Вам нужно будет использовать замыкание, чтобы при вызове ColourBlock использовалось значение i, когда оно вызывалось (которое в коде ниже присваивается currentPosition). Попробуйте изменить цикл for на что-то вроде:

for (var i = 0; i < numofrows; i++) {
    (function() {
        var currentPosition = i;
        setTimeout(function() {
            ColourBlock(currentPosition);
        }, 500);
    })();

Answer 4

Попробуйте увеличить время в вашем периоде setTimeout. Когда у меня была похожая проблема, мы использовали промежуток в 200 миллисекунд, и он работал.