Не удается принудительно перерисовать DOM с помощью window.getComputedStyle или element.offsetHeight? - PullRequest
Новая
       15

Не удается принудительно перерисовать DOM с помощью window.getComputedStyle или element.offsetHeight?

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

У меня есть функция, запуск которой занимает некоторое время, поэтому я пытаюсь установить отображаемое значение div (которое в основном говорит «пожалуйста, подождите»), чтобы «заблокировать» в начале функции, а затем «Нет», когда функция завершена, чтобы предупредить пользователя о том, что функция запущена.

Настройка дисплея установлена ​​правильно, и я вижу изменения в журнале консоли; однако я не могу заставить его перерисовать, пока функция не будет завершена. После нескольких часов поисков ответов на подобные вопросы на форуме мне кажется, что лучше всего вызывать window.getComputedStyle или element.offsetHeight, но, похоже, они не работают.

Вот мой код: 

function renumber(){
    notif = document.getElementByID("notification");  //this is my div
    notif.style.display = "block";
    window.getComputedStyle(notif, null).height; //I've tried this as well as...
    notif.offsetHeight;  //trying this seperately

    /////////big loop that takes a long time to run/////////

    notif.style.display = "none";
}

Я также попытался вместо этого установить CSS, а затем с помощью window.getComputedStyle и element.offsetHeight: 

doc = document.styleSheets[6].cssRules[0].style;
disp = doc.setProperty('display','block');
window.getComputedStyle(notif, null).height; //I've tried this as well as...
notif.offsetHeight;  //trying this seperately

И я даже попытался отказаться от своего уведомления div и использовать setTimeout () и alert (), но даже это не отображается до тех пор, пока функция не будет завершена (не имеет значения, сколько времени я потратил): 

function renumber(){
    setTimeout(function() { alert("my message"); }, 50);

    ////big loop that takes a long time to run////
}

Так что со всем этим мой вопрос в том, почему window.getComputedStyle и element.offsetHeight не перерисовывают и заставляют мой div отображать способ установки значений внутри функции? Все, что я видел в Интернете, звучит так, как если бы я просто позвонил одному из них, и это вызвало бы перерисовку, поэтому я запутался, почему не вижу перерисовки. Есть ли лучший способ, которым я должен делать это?

1 Ответ

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

Сказал бы, что проблема в том, что JS является однопоточным, вы блокируете пользовательский интерфейс из-за медленной операции.

Не знаете, есть ли сигнал о событиях процесса в пользовательский интерфейс, общий для таких сред, как Qt, et c ., но setTimeout может помочь здесь (может не работать идеально здесь во фрагменте, медленная часть занимает около 6 секунд в моем Chrome): 

function renumber(){
    notif = document.getElementById("notification");  //this is my div
    notif.style.display = "block";

    setTimeout(long, 0, notif);
}
renumber();
function long(notif) {
    console.log("Long starts", new Date());
    for(var a=0;a<1000000000;a++) if(a % 10) a++; else a += 0.1;
    console.log("Long end", new Date());
    notif.style.display = "none";
}
<div id="notification" style="display: none;">
    Wait please !
</div>
...