Если я делаю изменения DOM в обработчике событий Javascript, являются ли изменения, внесенные поэтапно, или только один раз в конце?

Скажем, у меня есть следующий обработчик событий javascript:

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    longRunningFunction();
    document.body.style.backgroundColor = 'red';
}

Будет ли браузер сначала отображать зеленый фон, а затем переключать его на красный? Или отобразить красный фон напрямую?

В соответствии с моим тестированием он отображает красный цвет непосредственно в конце обработчика события. Но является ли эта часть спецификации или просто случайным образом, как браузеры реализуются?

UPDATE:

Я должен уточнить, что я не "прицелю" на этот эффект. Скорее, я хочу получить некоторую гарантию, что это произойдет не. Некоторые из моих обработчиков событий меняют многие вещи, и это облегчает мою жизнь, если я могу предположить, что ни одно из промежуточных состояний не отображается.

Ответы

Ответ 1

Вот что произойдет в среде выполнения JavaScript:

  • document.body.style.backgroundColor изменит свое значение на 'green'.
  • Запустится длительный процесс.
  • document.body.style.backgroundColor изменит свое значение на 'red'.

Неизвестно, как изменения в свойстве backgroundColor будут влиять на внешний вид страницы, если поток JavaScript заблокирован.

Вот пример. Если вы нажмете на слово hello, вы увидите небольшую задержку, а затем фон станет красным:

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    longRunningFunction();
    document.body.style.backgroundColor = 'red';
}

function longRunningFunction() {
    for(var i=0; i<2000000000; ++i) { +i; }
}

document.body.addEventListener("click", handleEvent);
<div>hello</div>

Ответ 2

Означает ли это, на что вы нацелены?

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    alert();
    document.body.style.backgroundColor = 'red';
}