Как в JS выполнить вызов функции после выполнения innerHTML (обновления DOM)?

Question

[Дмитрий Масленников]

Есть div-контейнер модального окна, содержимое которого загружается через AJAX. Далее (после загрузки содержимого) определяется его высота в зависимости от которой выравнивается модальное окно.

document.getElementById('modal').innerHTML = ajax_html;
...
var height = document.getElementById('modal').clientHeight;

Функции выполняются одновременно из-за чего высота модального окна начинает определяться до загрузки в него содержимого (и обновления DOM-дерева).

Такой трюк позволяет решить проблему, но выглядит не слишком изящно в коде.

document.getElementById('modal').innerHTML = ajax_html;
...
setTimeout(function() {
    var height = document.getElementById('modal').clientHeight;
    ...
}, 20);

Каким образом можно вызвать вторую функцию (определение высоты) только после завершения DOM-операции (innerHTML) в первой?

Comments

[alex]

Функции выполняются одновременно

с чего вы взяли? .innerHTML синхронное свойство, пока оно не выполнится, дальнейший код не выполнится

[Дмитрий Масленников]

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

[alex]

Дмитрий Масленников: ок, спорить не буду, я думал вы утверждаете что innerHTML асинхронный. сам innerHTML точно синхронный и действия с домом синхронны, возможно тут дело в процессе рендеринга, репэйнт, рефлоу, стайл, композитинг вот это все - выполняются отдельно, точно не скажу я так глуоко не копал

[Дмитрий Масленников]

Alex: да, скорее всего из-за этого. someart тоже обратил внимание, что все связано с процессом рендеринга. а можно ли как-нибудь отследить завершение перестройки DOM-дерева? или setTimeout будет наиболее простым решением?

Answer 1

[someart]

Смотрите промисы.

А что мешает в коллбеке при успешной загрузке все это сделать?

Comments

[Дмитрий Масленников]

уже пробовал такие варианты (и с промисами, и с callback), но вторая функция все равно отрабатывает до завершения перестроения DOM-дерева.

[Дмитрий Масленников]

можно ли как-то отследить событие завершения изменения DOM? Есть же DOMContentLoaded, может есть что-то подобное и для отслеживания изменения дерева?

[someart]

А Вы можете прикрепить кусок кода, чтобы стало понятней? А очень странное поведение для .innerHTML

[Дмитрий Масленников]

вот непосредственно мой код (в примере я его немного упростил, чтобы было понятнее):

result = JSON.parse(result);
...
html('modal_content', result.html);
...
modal_resize();

это вспомогательные функции:

function html(el, html) {
	document.getElementById(el).innerHTML = html;
}

function modal_resize() {
	var h_display = window.innerHeight;
	var h_content = document.getElementById('modal_content').clientHeight;
	var k = 0.25;
	if (h_content*100/h_display > 70) k = 0.5
	var margin = (h_display-h_content)*k;
	if (margin < 20) margin = 20;
	document.getElementById('modal_content').style.marginTop = margin + 'px';
	document.getElementById('modal_content').style.height = 'auto';
}

[someart]

Смотрите, сам .innerHTML выполняется синхронно, но проблема в том, что страничка ваша рендерится не одновременно с Вашим кодом. У браузеров есть такая штука как Pipeline, если хочется углубиться, то можно погуглить про Browser Event Loop. Кратко говоря, страница рендерится (вешаются стили, апдейтится разметка, происходят визуальные изменения) только после того, как отработает ваш код. Поэтому, если не заморачиваться, то можно просто заюзать setTimeout().

[Дмитрий Масленников]

someart: да, я тоже подозревал что-то подобное, спасибо что пояснили. может имеет смысл попробовать requestAnimationFrame(callback)? или от этого не будет толку?

[someart]

Насколько знаю, то requestAnimationFrame() выполняется перед рендером.
Гляньте на MutationObserver, это как раз то, что подойдет

Answer 2

[Иван Вишневский]

Тут уже подсказали, но вот пен, мне просто самому интересно стало.
https://codepen.io/forgetable/pen/xdYPRb