Принудительно обновить / перерисовать элемент DOM - PullRequest
Новая
       11

Принудительно обновить / перерисовать элемент DOM

0 голосов
/ 17 апреля 2020

Скажем, у меня есть div и два стиля: 

.off { background: gray; }
.on { background: red; }

Изначально я даю div стиль .on.

Перед запуском большого l oop я даю стиль. в див. После l oop я снова даю div стиль .on. 

document.getElementById("divID").className = "off";

for (i = 0; i < 10000000; i++ ){}

document.getElementById("divID").className = "on";

Дело в том, что div никогда не отображает серый фон. Это нормально, потому что, если я хорошо понял Javascript, как только l oop запускается, DOM не может быть изменен до конца l oop. Синхронный материал Как это решить?

Я проверил десятки методов на стеке потока: функции ожидания / сна, тайм-ауты, изменение .offsetheight, игра с отображением: нет / блок, и т. Д. c. В 2020 году абсолютно ничего не работает.

Если я проверю внутри l oop, у div будет стиль .off после ввода l oop. Просто DOM не рендерит новый фон.

Как заставить этот рендеринг? Как быть уверенным, что элемент визуально обновляется после изменения его класса, прежде чем идти дальше? Идея состоит в том, чтобы «отключить» GUI приложения во время длительных вычислений, а затем «включить» его после выполнения вычислений.

Спасибо.

...