<pre><code>
<h2 id="caption">initial</h2>
<script>
setTimeout(function(){
document.getElementById('caption').textContent = 'updated';
alert('info');
}, 1000);
</script>
</code></pre>
Код обновляет элемент с задержкой, а alert блокирует смену текста до его закрытия.
alert блокирует отрисовку DOM, поэтому обновление не появляется до закрытия окна. А у вас были похожие трудности? Как обходили этот момент? Может, кто пробовал ставить alert в setTimeout с нулевой задержкой?
При вызове alert браузер не успевает перерисовать изменения в DOM, так как модальное окно блокирует поток отрисовки. Даже если вы назначите update, браузер сначала выполняет скрипт и только потом обновляет отображение, если нет блокирующего элемента. Если же хотите, чтобы изменения отобразились до alert, можно назначить вызов alert внутри другого setTimeout с нулевой задержкой.
За такую ситуацию я сталкивался не раз. alert действительно блокирует рендеринг, и изменения в DOM не появятся до тех пор, пока окно не закроется. У меня это было неожиданно, когда я пытался обновить информацию на странице в динамике. В итоге пришлось прибегать к хитрым уловкам с setTimeout нулевой задержки, чтоб сначала отобразить обновления, а потом уже показать уведомление. Такая особенность иногда может сломать ожидаемый UX, поэтому буду осторожнее с alert.
Я не первый раз сталкивался с такой проблемой — alert блокирует отрисовку DOM. Решил это, вызвав alert в setTimeout с минимальной задержкой, чтобы браузер успел отрендерить изменения. Но вообще я стараюсь избегать использования alert, так как он прерывает выполнение скриптов и ухудшает UX. Иногда лучше подобрать альтернативу, например, кастомные модальные окна.