Изменения DOM не выполняются немедленно

Question

Итак, у меня есть скрытый элемент, я хочу показать его и сразу после этого вызвать предупреждение.

Я пытался использовать jquery:

$('#myElement').show();
alert('test');

Я также пытался использовать обычный JavaScript:

document.getElementById('myElement').setStyle('display: block');
alert('test');

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

Почему предупреждение запускается до обновления DOM? Есть ли у меня какой-либо способ принудительного обновления DOM или мне нужно добавить тайм-аут вручную после того, как я покажу элемент?

Я пытался поиграться с $ .then () и $ .done (), но ни один из них не работает.

Answer 1

Перерисовки браузера, запускаемые JS, запускаются в главном цикле событий JavaScript.

DOM обновляется, но его рендеринг не выполняется до тех пор, пока JS не будет занят чем-то другим.

alert() блокируется, поэтому все JS в главном цикле событий приостанавливаются до тех пор, пока он не будет отменен.

Вы можете подождать анимационный кадр, прежде чем запускать предупреждение.

document.getElementById('myElement').setStyle('display: block');
requestAnimationFrame(() => alert('test');)

Answer 2

Это потому, что alert() является модальной операцией, которая блокирует поток пользовательского интерфейса браузера от обновления.В приведенном выше коде, когда вы вызываете alert(), DOM все еще находится в процессе обновления, но еще не завершил перерисовку, но поток заблокирован от завершения до тех пор, пока пользователь не отклонит alert().

У вас есть три решения.Во-первых, вы можете поместить alert() в тайм-аут, чтобы задержать его:

$('#myElement').show();
setTimeout(function(){
  alert('test');
}, 20); // 20ms should be a long enough delay even on the slowest machines

Во-вторых, вы можете использовать библиотеку для отображения немодальных оповещений внутри самого DOM, т.е. Сообщать .

Наконец, предполагая, что ваша цель только для тестирования / отладки, вы можете использовать console.log(), поскольку это не модальная операция:

$('#myElement').show();
console.log('test');

Чтобы увидеть консоль, нажмите F12 в вашем браузере.Обратите внимание, что этот метод, наряду с console.dir(), всегда должен использоваться для отладки, а не alert().

Answer 3

Если вы используете jQuery, вы можете добавить обратный вызов после выполнения show().

Ссылка на документ: http://api.jquery.com/show/

$('#myElement').show(400, function() {
   alert('test')
})